iOS5 上 webkit 错误的解决方法。错误描述：具有 -webkit-transform: scale(x) 父级的 iframe 的内容被缩放 2 倍答案

【问题标题】：Workaround for webkit bug on iOS5. Bug description: The content of an iframe which has a parent with -webkit-transform: scale(x), is scaled 2 timesiOS5 上 webkit 错误的解决方法。错误描述：具有 -webkit-transform: scale(x) 父级的 iframe 的内容被缩放 2 倍
【发布时间】：2013-08-07 07:36:53
【问题描述】：

我遇到了一些关于 webkit 错误 [1] 的问题。长话短说，如果 iframe 的祖先带有 -webkit-transform: scale(x) ，则 iframe 的内容将缩放 2 倍。发生这种情况的平台是 iOS5（在 Safari 和 UIWebView 中）。我已经在 iOS4、iOS6 和 webkit 的最新夜间版本上进行了测试，但我无法在那里重现它。所以这个问题似乎在较新的版本中得到了解决。

我尝试了其中一个错误 cmets [2] 中描述的解决方法，但它并没有完全解决问题。为了让它工作，我必须先添加 -webkit-transform-style: preserve-3d 然后在超时内添加 -webkit-transform: scale(x) 到同一个元素。这本来是可以接受的，但如果在 iframe 的祖先之一中更改了任何继承的属性，则解决方法无效并且内容再次缩放 2 倍。

有人知道解决此问题的更好方法吗？

链接：

[1] 错误链接：https://bugs.webkit.org/show_bug.cgi?id=15676

[2] 解决方法说明：https://bugs.webkit.org/show_bug.cgi?id=15676#c10

【问题讨论】：

标签： ios5 webkit

【解决方案1】：

我遇到了同样的问题，并设法通过这种方式解决：

webkit-transform: scale(x)
zoom: 1/x

此外，您可能希望在 Android 2.x 上对几乎所有内容进行相同的修复

尽管在 iOS5.1 上我仍然有一个问题，尽管内容已正确缩放，但如果它的一部分位于可见视口后面（在溢出下：隐藏），它在缩放的 iframe 中仍然显示为空白。

【讨论】：