我一直都在与iOS和其他所有产品打交道。通常涉及堆栈上下文问题。在我看来,position: sticky
and left: 0
元素相对于iOS上的第一行而言。iOS无法像其他所有浏览器一样处理堆栈上下文。
我从来没有真正弄清楚是什么原因造成的。从技术上讲,即使您的iPhone单元在滚动时,它也仍停留在左侧,因为它是相对于没有的父单元而言的left: 0
。我假设这与iOS的处理方式有关position: sticky
。粘性开始相对,然后更改为固定。届时所有其他浏览器都将其固定在左侧。您在position: sticky;
元素内有一个position: sticky;
元素。那是一个新的堆栈上下文。我相信iOS会将它固定在其父目录上,而不是您期望的那样。由于父行没有left: 0
它将与其他所有内容一起滚动。我希望这有帮助。我没有看到任何闪烁,但在iOS 13出现涉及滚动和堆叠上下文的情况后,我公司的Web框架中有一些损坏的组件。我会在多个iOS设备上进行测试。
编辑更多内容后,我相信这是一个堆栈上下文问题。我仅在iphone单元上将z-index调高到1000,并且STILL下面的行出现在它上面。
如果您不必支持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/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
还有-
隐藏HTML和主体上的溢出。在桌子上放一个包装纸。放在-webkit-overflow-scrolling: auto
包装纸上。在iOS 12上运行它,您不会看到它闪烁。您不会有动量滚动。iOS13消除了对的需要,-webkit-overflow-scrolling
因此您甚至无法覆盖它。如果您将touch
on 的值设置为on -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;
}
Iphone
value
value
value
value
value
value
value
value
a set
0
0
0
0
0
0
0
2
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0