Start a new topic

CSS transform rotateX,rotateY not working in HTMLDrawable

CSS transform rotateX,rotateY not working in HTMLDrawable


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

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 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,

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?

 

 

 
Login or Signup to post a comment