CODEWITHSUNDEEP
cordovawebviewuiwebviewios9visual-glitch
Sylvain Brejeon
Sylvain Brejeon

Reputation: 1064

Why iOS9 WebView CSS Transform turns red element into blue ones?

Visual Glitch Sample

The right-hand-side token ('PLI') has two identical sides.

When it's applied a css transform rotateX(180deg), the red tokens (and only the red ones) on it's left side are turning blue which is unexpected.

The problem occurs only in the iOS9 webview of a Cordova app.

Has anyone ever encountered that kind of problem?

I don't know where to report this issue.

King Regards

Upvotes: 2

Views: 599

Answers (2)

Sylvain Brejeon
Sylvain Brejeon

Reputation: 1064

iOS 9.1 may fix the issue, but in the meantime applying a transform: translate3D(0,0,0) seems like a good workaround. Thank you very much!

Upvotes: 1

Rongrong Luo
Rongrong Luo

Reputation: 402

I think iOS9 webview has some rendering issue. I encountered some weird color behavior in my app, and I fixed that by the tricks below. But I am not sure it would help you, just give a try.

  1. try -webkit-transform: translate3D(0,0,0); to accelerate GPU.
  2. and -webkit-backface-visibility: false;
  3. and -webkit-perspective: 1000;

And I have to say that in IOS9.1, some rendering bugs just go. Maybe it just looks fine when you run it in iOS9.1

Hope that helps.

Upvotes: 1

Related Questions