Tor*_*ten 5 html javascript css ios
当我在iPad 4浏览器上查看以下html页面时(无论是Safari还是Chrome),浏览器在缩放时都会崩溃(双击缩放或缩放缩放).该页面包含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>
Run Code Online (Sandbox Code Playgroud)
也许在iPhone和旧版iPad上也会出现同样的问题.这是一个奇怪而烦人的错误; 当我停用-webkit-backface-visibility:内部元素的隐藏样式时,它不会发生.
您可能会问:为什么我不能简单地删除-webkit-backface-visibility:hidden样式,因为它在这个页面上没有任何区别?嗯,这是一个极小的反例,我需要在实际的,更复杂的页面上.
小智 0
尽量不要使用position: absolute;而是使用position: relative;.
您也可以尝试-webkit-perspective: 1000;与-webkit-backface-visibility: hidden;
| 归档时间: |
|
| 查看次数: |
3109 次 |
| 最近记录: |