网格项目与位置粘性重叠

Question

我在 firefox 的网格容器中遇到粘性项目问题。

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

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

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

在Chrome (80.0.3987.122)一切正常。项目 7 和 8 彼此相邻（容器的初始 scrollWidth 为 800px）
然而，在 Firefox (73.0.1 (64-bit) 中，第 7 项和第 8 项重叠（并且容器的初始滚动宽度为 700 像素）

有人知道如何在 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）中构建布局。

Answer 2

添加一个宽度非常小的额外项目似乎可以避免 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 0.3px;
}
.items::after {
  content:"";
}

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

网格项目与位置粘性重叠

Grid items overlapping with position sticky

html

css

firefox

sticky

css-grid