html - 位置粘iPhone闪烁

Question

下面是我的一小段代码。只是想知道为什么“iphone”单元仅在 iphone 上闪烁。附言。我无法使用表格或列表作为结构。我还尝试使用 transform:translate3d(0,0,0); 。

基本上，我也需要第一个单元格在 iPhone 和 iPad 上的左侧和顶部都具有粘性。我想仅使用 HTML 和 CSS 来做到这一点。

IMPORTANT

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

.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;
}

<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>

Answer 1

我一直在与 iOS 和其他一切事物作斗争。它通常涉及堆叠上下文问题。在我看来， position: Sticky 和 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，下面的行仍然出现在其上方。

如果您不必支持 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 和正文上的溢出。在 table 周围放一张 wrapper 。将 -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>