Html 位置闪烁

下面是我的一段代码。只是想知道为什么“iphone”手机只在iphone上闪烁。另外，我不能用表格或列表来表示结构。我还尝试使用

transform:translate3d（0,0,0）

基本上，在iPhone和iPad上，我需要的第一个电池在左边和上面都是粘性的。我想这样做，只使用HTML和CSS

重要的

请不要用固定的解决方案回答，我不知道表格将放在正文中的什么位置。将有一个标题，一些内容等


.table{
宽度：2000px；
位置：相对位置；
}
.tr{
溢出：可见；
显示：块；
空白：nowrap；
字号：0；
}
.tc{
边框：1px实心#DDD；
显示：内联块；
宽度：100px；
高度：100px；
文本对齐：居中；
字体大小：12px；
}
.trh{
背景：#000；
颜色：#FFF；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
z指数：1；
}
.tc.第一{
背景：#000；
颜色：#FFF；
职位：-网络工具包粘性；
位置：粘性；
左：0；
}

苹果手机
价值
价值
价值
价值
价值
价值
价值
价值
一套
0
0
0
0
0
0
0
2.
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
一套
0
0
0
0
0
0
0
0
我一直在用iOS与其他任何东西对抗古怪。它通常涉及堆叠上下文问题。在我看来，
位置：sticky
和
left:0
元素与iOS上的第一行相对。iOS不像其他浏览器那样处理堆叠上下文

我从来没有真正弄清楚到底是什么原因造成的。从技术上讲，您的iPhone手机即使在滚动时也会卡在左边，因为它是相对于它的父代的，而父代没有
left:0
。我假设这与iOS如何处理
position:sticky
有关。粘性从相对开始，然后更改为固定。此时，所有其他浏览器都会使它停留在左侧。您有一个
位置：粘滞元素内部
位置：粘性元素。这是一个新的堆叠上下文。我相信iOS会将它固定到它的父级，而不是您期望的方式。由于父行没有
左：0
，因此它将与其他所有内容一起滚动。我希望这有帮助。我没有看到闪烁，但在iOS13发布后，我公司的网络框架中出现了一些损坏的组件，包括滚动和堆叠上下文。我会在多台iOS设备上进行测试

编辑在玩了一些之后，我相信这是一个堆叠上下文问题。我仅在iphone手机上将z指数调到1000，下面的行仍然显示在上面


如果你不需要支持InternetExplorer，我会使用CSS网格来实现这个布局。这样您就不必担心
位置：粘性



我在业务应用程序中使用它来处理动态数据量大的内容，因此，如果使用得当，它将具有难以置信的灵活性

再次更新——如果您根本无法更改DOM，那么您将不得不处理闪烁问题，因为即使网格解决方案也需要对某些元素进行包装。只是想澄清一下。。。。使用网格解决方案，您不需要知道将有多少列或行。你似乎对那方面很感兴趣。网格区域还创建一个新的堆叠上下文，并使所有内容都与网格区域相关，同时允许灵活的单位。我不能给你一个答案，除非你展示你的动态数据是如何进来的。我们需要更多的上下文来为您提供代码解决方案

同样，之所以会发生闪烁，是因为您在另一个粘性元素中放置了一个粘性元素。这只是iOS，如果你想像这样使用它，你必须处理好它

下面是有关堆叠上下文及其工作方式的文档。正如我在评论中所说，你将不得不采取不同的方法，或者只是处理它


也--

隐藏HTML和正文上的溢出。在桌子周围放一个包装纸。将
-webkit溢出滚动：auto
放在包装器上。在iOS 12上运行它，您将看到它不会闪烁。不过，你不会有滚动的动力。iOS13删除了
-webkit溢出滚动的需要，因此您甚至无法覆盖它。如果将
touch
的值置于
-webkit overflow scrolling
上，您现在将得到闪烁。运行下面的代码，您将看到它不会闪烁。长话短说，正如我多次说过的，你必须找到一种不同的方法。既然iOS13已经发布了，你就无法修复这个问题，而且你真的不想以任何方式禁用动量滚动


html{
溢出：隐藏；
宽度：100%；
身高：100%；
}
身体{
溢出：隐藏；
身高：100%；
宽度：100%；
}
.包装纸{
溢出：自动；
-webkit溢出滚动：自动；
宽度：100%；
身高：100%；
}
.桌子{
宽度：2000px；
位置：相对位置；
}
.tr{
溢出：可见；
显示：块；
空白：nowrap；
字号：0；
}
.tc{
边框：1px实心#DDD；
显示：内联块；
宽度：100px；
高度：100px；
文本对齐：居中；
字体大小：12px；
}
.trh{
背景：#000；
颜色：#FFF；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
z指数：1；
}
.tc.第一{
背景：#000；
颜色：#FFF；
职位：-网络工具包粘性；
位置：粘性；
左：