iOS：带有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器

Question

当我在iPad 4浏览器上查看以下html页面时（无论是Safari还是Chrome），浏览器在缩放时都会崩溃（双击缩放或缩放缩放）。 该页面包含40个简单的div（由javascript插入以简洁起见）具有属性-webkit-backface-visibility：hidden。

<!doctype html>
<html>
<head>
    <style>
        .front {
            -webkit-backface-visibility: hidden;
            position: absolute;
            border: 1px solid black;
            width: 800px;
            height: 800px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
</head>

<body id="outer">
    <script>
        $(function() {
            for (var i = 0; i < 40; i++) {
                $(document.createElement('div'))
                    .css({top: i*10, left: i*10})
                    .addClass("front").appendTo($("#outer"));
            }
        })
    </script>
</body>
</html>

也许在iPhone和旧版iPad上也会出现同样的问题。 这是一个奇怪而烦人的错误; 当我停用-webkit-backface-visibility：内部元素的隐藏样式时，它不会发生。

您可能会问：为什么我不能简单地删除-webkit-backface-visibility：hidden样式，因为它在这个页面上没有任何区别？ 嗯，这是一个极小的反例，我需要在实际的，更复杂的页面上。

Answer 1

似乎移动版Safari在转换，转换或背面可见性等css3属性方面存在一些问题，并且有时会在内存中运行。

看到：

但不幸的是，没有已知的解决方法，除了删除属性...你是如何解决你的问题的？

Answer 2

尽量不要使用position: absolute; 而是使用position: relative; 。

你也可以尝试给出-webkit-perspective: 1000; 与-webkit-backface-visibility: hidden;

iOS：带有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器

问题描述

2 个解决方案

解决方案1
1 2014-02-12 13:19:45

解决方案2
0 2013-10-02 20:44:57

iOS：带有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器

问题描述

2 个解决方案

解决方案1 1 2014-02-12 13:19:45

解决方案2 0 2013-10-02 20:44:57

解决方案1
1 2014-02-12 13:19:45

解决方案2
0 2013-10-02 20:44:57