Khi tôi xem trang html sau trên trình duyệt iPad 4 (không quan trọng cho dù Safari hoặc Chrome), trình duyệt bị treo khi phóng to (nhấn đúp hoặc thu nhỏ để thu phóng). Trang chứa 40 div đơn giản (được chèn bởi javascript cho ngắn gọn) có thuộc tính -webkit-backface-visibility: hidden.iOS: Nhiều divs với khả năng hiển thị -webkit-backface: trình duyệt bị lỗi ẩn khi phóng to
<!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>
Cùng một vấn đề có lẽ cũng xảy ra trên iPhone và iPad cũ hơn. Đây là một lỗi kỳ lạ và gây phiền nhiễu; nó không xảy ra khi tôi tắt tính năng hiển thị -webkit-backface: kiểu ẩn của các phần tử bên trong.
Bạn có thể hỏi: tại sao tôi không chỉ đơn giản loại bỏ khả năng hiển thị -webkit-backface: kiểu ẩn vì nó không tạo nên bất kỳ sự khác biệt nào trên trang này? Vâng, đây là một counterexample tối thiểu, tôi cần nó trên trang thực tế, phức tạp hơn.