Menu
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.
895
It seems that mobile Safari has some troubles with css3 properties like transitions, transform or backface-visiblity and runs sometimes out of memory.
See:
But unfortunately there are no known workarounds, except of removing the property... How did you solve your problem?
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
