为什么 iOS9 WebView CSS Transform 将红色元素变成蓝色元素？答案

【问题标题】：Why iOS9 WebView CSS Transform turns red element into blue ones?为什么 iOS9 WebView CSS Transform 将红色元素变成蓝色元素？
【发布时间】：2015-12-31 14:22:13
【问题描述】：

Visual Glitch Sample

右侧标记 ('PLI') 有两个相同的边。

当它应用 css 变换 rotateX(180deg) 时，它左侧的红色标记（并且只有红色标记）会变成蓝色，这是出乎意料的。

该问题仅出现在 Cordova 应用的 iOS9 webview 中。

有人遇到过这种问题吗？

我不知道在哪里报告这个问题。

国王的问候

【问题讨论】：

“视觉故障样本”的链接已失效。我在网上发现了一个类似的问题：El Capitan and iOS 9 webkit apps and Safari not rendering Colors and Fonts correctly.

标签： cordova webview uiwebview ios9 visual-glitch

【解决方案1】：

iOS 9.1 可能会解决此问题，但同时应用转换： translate3D(0,0,0) 似乎是一个很好的解决方法。非常感谢！

【讨论】：

【解决方案2】：

我认为 iOS9 webview 有一些渲染问题。我在我的应用程序中遇到了一些奇怪的颜色行为，我通过以下技巧解决了这个问题。但我不确定它是否对您有帮助，请尝试一下。

尝试-webkit-transform: translate3D(0,0,0);加速 GPU。
和-webkit-backface-visibility: false;
和-webkit-perspective: 1000;

我不得不说，在IOS9.1中，一些渲染bug就消失了。也许在 iOS9.1 上运行它看起来还不错

希望对您有所帮助。

【讨论】：