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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
