当我在 iPad 4 浏览器（无论是 Safari 还是 Chrome）上查看以下 html 页面时，浏览器在缩放时崩溃（双击缩放或捏合缩放）。该页面包含 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:hidden 样式时，它不会发生。
您可能会问：为什么我不简单地删除 -webkit-backface-visibility:hidden 样式，因为它在此页面上没有任何区别？好吧，这是一个最小的反例，我需要在实际的、更复杂的页面上使用它。