Wikitude

CSS transform rotateX,rotateY not working in HTMLDrawable

Hello,

I am using Wikitude on an iPad air, with a custom Cordova application.

I have added some HTMLdrawable elements, containg a div that flips in CSS, meaning it shows and image on the front, then flip and shows another image on the back.

These transitions were OK, on iOs 9.

 

Then I had to update the iPad, which is now running on 10.0.1, using Wikitude SDK 5.3.0.

Now, any transform: rotateX, or rotateY, used on a div in all my HTMLdrawables do not show. The element simply disappears.

I used Safari's console to add/remove this property, so I'm sure it's that one that I'm having troubles with.

 

What's odd is if I double tap one home button, showing all my opened applications, I can see the preview of my custom application, with the CSS properly applied, meaning I see my div flipping.

If I switch back into the app, the div disappears.

 

As seen in attachment screenshots, what I need to see are the orange coins. They disappear when I'm inside the app, and appear in preview mode.

Any idea what's wrong with this CSS property?

 

 

 

Hi Remi,
I have some follow question:
* Am I right that you try to rotate a div inside the HTMLDrawable and not the HTMLDrawable itself.
* Can you try the div rotation in Mobile Safari? It would be interesting if Mobile Safari has some problems on iOS 10 in general.

* Can you send us a demo project or your HTMLDrawable so that we can try it out ourself?

Best regards,

Andreas

Hello Andreas,

Thanks for the reply.

Yes, I am animating a div inside the HTMLdrawable and not the HTMLdrawable itself. Please note that the animation was working before iOS + Wikitude updates.

The div rotation is OK on mobile Safari. I used this tutorial: https://davidwalsh.name/css-flip.

I attached a demo, which contains the HTML I use as an HTMLdrawable, + the CSS and the images. Please note that the background image on the #wrap is only a fallback, to see something if the flipping coin do not appear.

 

Thank you

Hi Remi,
I don't have an answer for you but some insight information:

The Wikitude iOS SDK still uses UIWebView. Mobile Safari is already running WKWebView. Unfortunately we can't use WKWebView internally because of some JS/Native code communication problems. This could explain why it's working in Mobile Safari but not insight our SDK. You would need to to the same tests using a UIWebView.

Maybe there were some internal changes of UIWebView between iOS 9 and iOS 10.

Another question that just came into my mind: Are you sure that the images are actually loaded (https issue maybe)?

Best regards,

Andreas