Tôi chiến đấu kỳ lạ với iOS so với mọi thứ khác mọi lúc. Nó thường liên quan đến các vấn đề bối cảnh xếp chồng. Tôi nhận thấy rằng phần tử position: stickyvà left: 0phần tử trở nên tương đối với hàng đầu tiên trên iOS. iOS không xử lý bối cảnh xếp chồng giống như tất cả các trình duyệt khác.
Tôi chưa bao giờ thực sự tìm ra chính xác nguyên nhân gây ra điều này. Về mặt kỹ thuật, tế bào iPhone của bạn bị kẹt ở bên trái ngay cả khi nó cuộn vì nó liên quan đến cha mẹ không có left: 0. Tôi cho rằng điều này có liên quan đến cách xử lý của iOS position: sticky. Dính bắt đầu tương đối và sau đó thay đổi để cố định. Tất cả các trình duyệt khác tại thời điểm đó sẽ làm cho nó dính vào bên trái. Bạn có một position: sticky;yếu tố bên trong một position: sticky;yếu tố. Đó là một bối cảnh xếp chồng mới. Tôi tin rằng iOS làm cho nó cố định với cha mẹ của nó chứ không phải theo cách bạn mong đợi. Vì hàng cha mẹ không cóleft: 0nó sẽ cuộn với mọi thứ khác. Tôi hi vọng cái này giúp được. Tôi không thấy nhấp nháy, nhưng tôi đã có một vài thành phần bị hỏng trong khung web của công ty tôi sau khi iOS 13 xuất hiện liên quan đến các bối cảnh cuộn và xếp chồng. Tôi sẽ thử nghiệm trên nhiều thiết bị iOS.
chỉnh sửa sau khi chơi xung quanh một số chi tiết với nó, tôi tự tin rằng đó là một vấn đề bối cảnh. Tôi đã quay vòng chỉ số z lên tới 1000 chỉ trên ô iphone và các hàng bên dưới VẪN xuất hiện phía trên nó.
Nếu bạn không phải hỗ trợ trình duyệt internet, tôi sẽ sử dụng lưới CSS để đạt được bố cục này. Sau đó, bạn sẽ không phải lo lắng vềposition: sticky
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/USE-css-grid-the-right-way/
Tôi sử dụng nó cho dữ liệu động nội dung nặng trong các ứng dụng kinh doanh để nó có thể linh hoạt đến không ngờ nếu được tận dụng đúng cách.
Đã cập nhật lại - Nếu bạn hoàn toàn không thể thay đổi DOM thì bạn sẽ phải đối phó với hiện tượng nhấp nháy vì ngay cả giải pháp lưới sẽ yêu cầu trình bao bọc xung quanh một số phần tử. Chỉ cần làm rõ .... Với một giải pháp lưới, bạn KHÔNG cần biết bạn sẽ có bao nhiêu cột hoặc hàng. Bạn dường như treo lên trên khía cạnh đó. Các khu vực lưới cũng tạo ra một bối cảnh xếp chồng mới và làm cho mọi thứ liên quan đến khu vực lưới trong đó cho phép các đơn vị linh hoạt. Tôi không thể cung cấp cho bạn câu trả lời cho đến khi bạn hiển thị cách dữ liệu động của bạn đến. Chúng tôi cần thêm ngữ cảnh để cung cấp cho bạn một giải pháp mã.
Một lần nữa, hiện tượng nhấp nháy đang xảy ra vì bạn có một phần tử định vị dính bên trong một phần tử dính khác. Đó chỉ là iOS và nếu bạn muốn sử dụng nó như thế này, bạn sẽ phải đối phó với nó.
Đây là tài liệu về bối cảnh xếp chồng và cách chúng hoạt động. Như tôi đã nói trong một bình luận, bạn sẽ phải thực hiện một cách tiếp cận khác hoặc chỉ đối phó với nó.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Pocationing/Under Hiểu_z_index / The_stacking_context
Cũng thế --
Ẩn phần tràn trên HTML và Body của bạn. Đặt một cái bọc quanh bàn. Đặt -webkit-overflow-scrolling: autotrên giấy gói. Chạy nó trên iOS 12 và bạn sẽ thấy nó không nhấp nháy. Bạn sẽ không có động lực cuộn mặc dù. iOS13 đã loại bỏ sự cần thiết -webkit-overflow-scrollingđể bạn thậm chí không thể ghi đè lên nó. Nếu bạn đặt giá trị của touchtrên -webkit-overflow-scrollingbạn bây giờ sẽ được nhấp nháy. Chạy mã này bên dưới và bạn sẽ thấy nó không nhấp nháy. Câu chuyện dài, như tôi đã nói nhiều lần, bạn sẽ phải tìm một cách tiếp cận khác. Bây giờ bạn không thể khắc phục điều này khi iOS13 không hoạt động và bạn thực sự sẽ không muốn tắt tính năng cuộn đà.
html {
overflow: hidden;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
height: 100%;
width: 100%;
}
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: auto;
width: 100%;
height: 100%;
}
.table {
width: 2000px;
position: relative;
}
.tr {
overflow: visible;
display: block;
white-space: nowrap;
font-size: 0;
}
.tc {
border: 1px solid #DDD;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
font-size: 12px;
}
.trh {
background: #000;
color: #FFF;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
.tc.first {
background: #000;
color: #FFF;
position: -webkit-sticky;
position: sticky;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="table">
<div class="tr trh">
<div class="tc first">Iphone</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">2</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
</div>
</div>
</body>
</html>