网格项目与位置粘性重叠

Question

我在使用Firefox的网格容器中遇到粘性物品问题。

我创建了一个网格容器，其中包含8个每个100px的项目：

• 项目1粘在左侧
• 项目8粘在容器的右侧

当我滚动到网格容器的右侧时：

• 在Chrome (80.0.3987.122)中，一切正常。项目7和8彼此相邻（容器的初始scrollWidth为800px）
• 但是在Firefox (73.0.1 (64-bit)中，项目7和8重叠（并且容器的初始scrollWidth为700px）

任何人都知道如何在Firefox中解决该问题吗？

请参见附件。

谢谢！

setTimeout(() => {
  console.log('container width', document.querySelector('#container-grid').scrollWidth + 'px');
}, 100)

#container-grid {
  width: 500px;
  background: silver;
  height: 100px;
  overflow-x: scroll;
}

.items {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
}

.sticky-left {
  position: sticky;
  left: 0;
}


.sticky-right {
  position: sticky;
  right: 0;
}

<div id="container-grid">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item sticky-left">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item ">item 6</div>
    <div class="item ">item 7</div>
    <div class="item sticky-right">item 8</div>
  </div>
</div>

Answer 1

我认为没有解决此问题的方法。

您正在混合最先进的功能（position: sticky和网格项），因此浏览器可能只需要一些时间来整理出正确的行为。

请注意，position: sticky尚不完整browser support。

我将尝试在标准块格式上下文（display: block或inline-block）中构建布局。