ฉันต่อสู้กับสิ่งแปลกประหลาดกับ iOS และทุกอย่างอื่นตลอดเวลา มักเกี่ยวข้องกับปัญหาบริบทการซ้อน ดูเหมือนว่าฉันposition: stickyและleft: 0องค์ประกอบจะสัมพันธ์กับแถวแรกบน iOS iOS ไม่จัดการบริบทการซ้อนเช่นเดียวกับเบราว์เซอร์อื่นทั้งหมด
ฉันไม่เคยรู้เลยว่าอะไรเป็นสาเหตุของสิ่งนี้ เทคนิคมือถือ iPhone left: 0ของคุณจะติดไปทางซ้ายแม้ว่าจะเลื่อนเพราะมันเป็นญาติกับมันของผู้ปกครองซึ่งไม่ได้มี position: stickyฉันสมมติว่านี้จะทำอย่างไรกับวิธีการจับ iOS Sticky เริ่มสัมพันธ์กันแล้วเปลี่ยนเป็นการแก้ไข เบราว์เซอร์อื่น ๆ ทั้งหมด ณ จุดนั้นจะทำให้ติดอยู่ทางซ้าย คุณมีposition: sticky;องค์ประกอบอยู่ภายในposition: sticky;องค์ประกอบ นั่นคือบริบทการสแต็คใหม่ ฉันเชื่อว่า iOS ทำให้เป็นพ่อแม่ไม่ใช่อย่างที่คุณคาดหวัง เนื่องจากแถวหลักไม่มีleft: 0มันจะเลื่อนไปกับทุกอย่างอื่น ฉันหวังว่านี่จะช่วยได้. ฉันเห็นว่าไม่กระพริบ แต่ฉันมีส่วนประกอบที่เสียหายอยู่เล็กน้อยในเฟรมเวิร์กเว็บไซต์ของ บริษัท หลังจาก iOS 13 ออกมาซึ่งเกี่ยวข้องกับการเลื่อนและการซ้อนบริบท ฉันจะทดสอบกับอุปกรณ์ iOS หลายเครื่อง
แก้ไขหลังจากเล่นไปกับมันฉันมั่นใจว่ามันเป็นปัญหาบริบทซ้อนกัน ฉันเหวี่ยงดัชนี z มากถึง 1,000 ในเซลล์ iphone เท่านั้นและแถวด้านล่างยังคงปรากฏอยู่ด้านบน
หากคุณไม่ต้องสนับสนุน Internet explorer ฉันจะใช้ CSS กริดเพื่อให้ได้เลย์เอาต์นี้ จากนั้นคุณไม่ต้องกังวลposition: sticky
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/using-css-grid-the-right-way/
ฉันใช้มันสำหรับเนื้อหาข้อมูลขนาดใหญ่แบบไดนามิกในแอปพลิเคชันทางธุรกิจเพื่อให้สามารถยืดหยุ่นอย่างเหลือเชื่อหากใช้ประโยชน์อย่างเหมาะสม
อัปเดตอีกครั้ง - หากคุณไม่สามารถเปลี่ยน DOM ได้เลยคุณจะต้องจัดการกับความริบหรี่เนื่องจากแม้แต่โซลูชันกริดจะต้องใช้ตัวห่อหุ้มองค์ประกอบบางอย่าง เพียงชี้แจง ... ด้วยโซลูชันกริดคุณไม่จำเป็นต้องรู้จำนวนคอลัมน์หรือแถวที่คุณจะมี ดูเหมือนว่าคุณจะวางสาย พื้นที่กริดยังสร้างบริบทการสแต็กใหม่และสร้างทุกสิ่งที่สัมพันธ์กับพื้นที่กริดที่อยู่ในขณะที่อนุญาตให้หน่วยที่ยืดหยุ่นได้ ฉันไม่สามารถให้คำตอบได้จนกว่าคุณจะแสดงว่าข้อมูลไดนามิกของคุณเข้ามาเราต้องการบริบทเพิ่มเติมเพื่อให้โซลูชันรหัสแก่คุณ
อีกครั้งการกะพริบเกิดขึ้นเพราะคุณมีองค์ประกอบตำแหน่งเหนียวภายในองค์ประกอบเหนียวอีก นั่นเป็นเพียง iOS และถ้าคุณต้องการใช้มันเช่นนี้คุณจะต้องจัดการกับมัน
นี่คือเอกสารเกี่ยวกับบริบทการซ้อนและวิธีการทำงาน ตามที่ระบุไว้ในความคิดเห็นคุณจะต้องใช้วิธีการอื่นหรือจัดการกับมัน
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
ยัง -
ซ่อนการโอเวอร์โฟลว์บน HTML และ Body ของคุณ ใส่เสื้อคลุมรอบโต๊ะ ใส่-webkit-overflow-scrolling: autoเสื้อคลุม เปิดใช้งานบน iOS 12 แล้วคุณจะเห็นว่ามันไม่สั่นไหว คุณจะไม่มีแรงเลื่อนเลื่อน iOS13 เอาความต้องการออกไป-webkit-overflow-scrollingเพื่อที่คุณจะไม่สามารถลบล้างมันได้ หากคุณให้คุณค่าtouchกับเมื่อ-webkit-overflow-scrollingคุณจะได้รับริบหรี่ เรียกใช้รหัสนี้ด้านล่างและคุณจะไม่เห็นการสั่นไหว เรื่องสั้น ๆ สั้น ๆ อย่างที่ฉันพูดไปหลายครั้งแล้วคุณจะต้องหาแนวทางที่แตกต่างออกไป คุณไม่สามารถแก้ไขได้ในขณะนี้ที่ iOS13 ไม่ทำงานและคุณไม่ต้องการปิดการใช้งานการเลื่อนโมเมนตัมอย่างไรก็ตาม
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>