iOS：带有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器
[英]iOS: Multiple divs with -webkit-backface-visibility:hidden crash browser when zooming
问题描述
When I view the following html page on my iPad 4 browser (doesn't matter whether Safari or Chrome), the browser crashes when zooming (either on double tap zoom or pinch to zoom). 
当我在iPad 4浏览器上查看以下html页面时（无论是Safari还是Chrome），浏览器在缩放时都会崩溃（双击缩放或缩放缩放）。 The page contains 40 simple divs (which are inserted by javascript for brevity) having the property -webkit-backface-visibility:hidden. 该页面包含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>
The same problem presumably also occurs on iPhone and older iPads. 也许在iPhone和旧版iPad上也会出现同样的问题。 This is a weird and annoying bug; 这是一个奇怪而烦人的错误; it does not happen when I deactivate the -webkit-backface-visibility:hidden style of the inner elements. 当我停用-webkit-backface-visibility：内部元素的隐藏样式时，它不会发生。
You may ask: why do I not simply remove the -webkit-backface-visibility:hidden style as it does not make any difference on this page? 您可能会问：为什么我不能简单地删除-webkit-backface-visibility：hidden样式，因为它在这个页面上没有任何区别？ Well, this is a minimal counterexample, I need it on the actual, more complex page. 嗯，这是一个极小的反例，我需要在实际的，更复杂的页面上。
2 个解决方案
解决方案1
1 2014-02-12 13:19:45
It seems that mobile Safari has some troubles with css3 properties like transitions, transform or backface-visiblity and runs sometimes out of memory. 似乎移动版Safari在转换，转换或背面可见性等css3属性方面存在一些问题，并且有时会在内存中运行。
See: 看到：
- Mobile Safari on iOS crashes on big pages iOS上的Mobile Safari在大页面上崩溃
- http://www.dimshik.com/ios-7-runs-out-of-memory-when-using-webkit-transform/ http://www.dimshik.com/ios-7-runs-out-of-memory-when-using-webkit-transform/
- CSS3 Transition ( Vendor Prefixes) crashes Safari immediately CSS3 Transition（Vendor Prefixes）立即崩溃Safari
- iOS Safari + CSS calc() + CSS transition = Instant Crash iOS Safari + CSS calc（）+ CSS转换=即时崩溃
But unfortunately there are no known workarounds, except of removing the property... How did you solve your problem? 但不幸的是，没有已知的解决方法，除了删除属性...你是如何解决你的问题的？
解决方案2
0 2013-10-02 20:44:57
Try not to use position: absolute; 尽量不要使用position: absolute; and instead use position: relative; 而是使用position: relative; . 。
Also you can try giving -webkit-perspective: 1000; 你也可以尝试给出-webkit-perspective: 1000; along with -webkit-backface-visibility: hidden; 与-webkit-backface-visibility: hidden;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.