iOS：具有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器 [英] iOS: Multiple divs with -webkit-backface-visibility:hidden crash browser when zooming
问题描述
当我在iPad 4浏览器上查看以下html页面（Safari或Chrome无关紧要）时，浏览器在缩放时会崩溃（无论是双击缩放还是双指缩放）。该页面包含40个简单的div（为简洁起见，由javascript插入）具有属性-webkit-backface-visibility：hidden。
<！doctype html>
< html>
< head>
< style>
.front {
-webkit-backface-visibility：hidden;
位置：绝对;
border：1px纯黑色;
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：隐藏的样式，因为它在这个页面上没有任何区别？那么，这是一个最小的反例，我需要它在实际的，更复杂的页面上。 解析方案
请参阅：
ul>
不过没有已知的解决方法，除去财产......你是如何解决你的问题的？
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). The page contains 40 simple divs (which are inserted by javascript for brevity) having the property -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. This is a weird and annoying bug; it does not happen when I deactivate the -webkit-backface-visibility:hidden style of the inner elements.
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? Well, this is a minimal counterexample, I need it on the actual, more complex page.
It seems that mobile Safari has some troubles with css3 properties like transitions, transform or backface-visiblity and runs sometimes out of memory.
See:
- Mobile Safari on iOS crashes on big pages
- http://www.dimshik.com/ios-7-runs-out-of-memory-when-using-webkit-transform/
- CSS3 Transition ( Vendor Prefixes) crashes Safari immediately
- iOS Safari + CSS calc() + CSS transition = Instant Crash
But unfortunately there are no known workarounds, except of removing the property... How did you solve your problem?
这篇关于iOS：具有-webkit-backface-visibility的多个div：缩放时隐藏的崩溃浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
