位置粘性iPhone闪烁

10

遵循我的一小段代码。只是想知道为什么“ iphone”单元仅从iphone闪烁。PS。我不能使用表格或列表作为结构。我也尝试使用transform: translate3d(0,0,0);。

基本上，我也需要第一个单元格同时在iPhone和iPad上同时保持Left和Top的粘性。我只想使用HTML和CSS来做到这一点。

重要

请不要回答固定的解决方案，我不知道桌子会放在身体的什么位置。将有一个标题，一些内容等。

显示代码段

html  css 
— 固定的
source
您是否在实际的iPhone上检查了此代码段？因为对我来说似乎还可以。
— 萨尼拉（Sanira）
我当然做了@Sanira
— 修复
— BugsArePeopleToo
1
@BugsArePeopleToo似乎不是同一个问题。我的意思是我只对一个单元有问题，而并非对所有单元都有问题。
— 修复
@Vixed您只想粘贴表格第一行的一个单元格还是整个单元格？
— Deepu Reghunath

Answers:

8

我一直在与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因此您甚至无法覆盖它。如果您将touchon 的值设置为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;
}
<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>
展开摘要

— 布雷特·帕森斯
source
嗨布雷特，谢谢你的回答。不幸的是，因为行数和列数是动态的，所以我不能使用“ grid”。如果要使用网格，则必须使用一些JS来管理它，但是我不能。
— 修复
您可以将其与动态内容一起使用。我每天都这样做。如果我今天有时间，我将用一些代码更新我的答案。
— 布雷特·帕森斯
CSS网格将创建所谓的隐式网格轨迹，内容将沿着您定义的显式模板放置。我已经使用动态布局做了一些疯狂的事情。
— 布雷特·帕森斯
我不知道列数。宽度不是100vw，而是越来越大！
— 修复
感谢您澄清是否需要支持IE。现在，我可以花时间向您展示。
— 布雷特·帕森斯
-1

如果重新排列元素，则可以实现此目的。

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh,
.tc.first {
  background: #000;
  color: #FFF;
}

.table {
  overflow: hidden;
}

.table-body {
  display: flex;
  height: calc(100% - 102px);
}

.row-head {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  width: calc(100% - 102px);
  height: 100%;
  overflow: scroll;
}
<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="table-body">
    <div class="row-head">
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
    </div>
    <div class="table-content">
      <div class="tr">
        <div class="tc">1</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">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">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">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">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">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">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">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>
</div>
展开摘要

— Deepu Reghunath
source
谢谢Deepu，但是它一定是粘性的，不是固定的，因为我不知道表格会出现在哪里。
— 修复
在问题中添加了解释。
— 修复
@Vixed我已经更新了解决方案
— Deepu Reghunath
我看到了，但是您改变了所有的dom。就像我说的那样，我做不到。
— 修复
@Vixed我回答了您的问题，请检查我发布的解决方案，使我变得黏黏。
— darligee
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.