Bố cục của tôi khá đơn giản, yếu tố nền lặp lại, một vài khoảng trống dọc (đường) và một số cầu ngang và một chiếc xe nhỏ cần lái xe bên dưới chúng khi bạn cuộn.Khi cuộn trên thiết bị iOS, chỉ mục z của phần tử không hoạt động
Mọi thứ hoạt động tốt trên máy Mac nhưng trên thiết bị iOS —các thiết bị thử nghiệm của tôi là: iPhone 4 trên iOS 6.1, iPad 2 trên iOS 6.1.3— z-index không được vinh danh khi sự kiện cuộn hoạt động.
Điều này có nghĩa rằng khi bạn di chuyển, chiếc xe, đó là position: fixed đến window, đang di chuyển qua cầu (trong đó có một z-index cao hơn so với "xe hơi") chứ không phải là z-index làm cây cầu cao hơn như nó phải được và trên các trình duyệt không phải iOS, giúp cho việc lái xe dưới cầu.
Dường như vấn đề phân lớp đơn giản, nhưng ngay cả với trường hợp kiểm tra rất đơn giản, lỗi vẫn còn rõ ràng.
Kiểm tra trường hợp: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(xem toàn màn hình trên thiết bị iPad để tránh di chuyển vấn đề iframe mà không liên quan đến nội dung demo)
Có ai biết những gì xảy ra với đoạn code đó sẽ gây ra z-index không hoạt động khi cuộn đang hoạt động?
Lưu ý: Điều này xảy ra trên cả Chrome, iOS và Safari gốc.
Dưới đây là các bit mã chạy trên reduced test case tôi liên kết với trên trong trường hợp ai đó có thể chỉ ra cách khắc phục mà không cần mở demo.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="car"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
</body>
</html>
CSS:
body {
/* Adds the 'road' as a background image. */
background: #8BA341 url("http://f.cl.ly/items/1r2g152h2J2g3m1e1V08/road.png") repeat-y top center;
margin: 0;
padding: 0;
}
.car {
/* The car's position is fixed so that it scrolls along with you. */
position: fixed;
top: 5%;
left: 52%;
width: 220px;
height: 330px;
background: #BD6C31;
z-index: 1;
}
.street {
/* Empty in the example, just used to space things out a bit. */
position: relative;
height: 500px;
}
.bridge {
/* A bridge crossing the main road. The car should drive under it. */
position: relative;
height: 353px;
/* Image of repeating road. */
background: url("http://f.cl.ly/items/0u0p2k3z45242n1w3A0A/bridge-road.png") repeat-x center left;
/* Higher z-index than car. */
z-index: 2;
}
Chỉ trong trường hợp bất kỳ ai khác tình cờ gặp câu hỏi này ... trong khi câu hỏi ban đầu chưa được trả lời hoàn toàn (tôi vẫn không biết tại sao thứ tự xếp thứ tự z-index bình thường không được sử dụng đúng cách) để làm việc là sử dụng chỉ số z âm cho các yếu tố nền và chính chiếc xe. Vì vậy, xe là tiêu cực, cầu vượt/cầu là trên một chỉ số z tích cực và sau đó iOS ám nó một cách chính xác. – Jannis
Tôi gặp vấn đề tương tự và giải pháp z-index phủ định của bạn thực sự là mẹo nhưng tiếc là làm tăng một vấn đề khác: chỉ số z âm trên các thẻ phá vỡ các liên kết. Cảm ơn bạn đã chia sẻ anyways, tôi sẽ làm một phần của tôi nếu tôi tìm thấy một cái gì đó nhưng tôi bỏ thuốc lá bị mắc kẹt ngay bây giờ. – ChristopherC
Tôi tiếp tục tìm cách giải quyết, nhưng trong khi đó đây là kết quả của một số điều tra: http://plnkr.co/aeubN4 Nếu tôi đúng, tôi không chắc liệu có bất cứ điều gì chúng ta có thể làm được không? – ChristopherC