Search code examples
cordovawebviewuiwebviewios9visual-glitch

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

Solution

  • 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.