Chrome on Mac：滚动条在使用 `position: sticky` 时消失

Question

请注意：此问题仅发生在 Mac 的 Chrome。

当可滚动容器的子项设置为 position: sticky; 时，可滚动元素的滚动条不再可见。

我尝试为 ::-webkit-scrollbar 规则设置 z-index 值，但这似乎不起作用。我还认为这是子元素的 z-index 问题，但在这个例子中，子元素没有设置背景，并且仍然会在它们下面显示滚动条。

在我的系统偏好设置中，我已将 "Show scroll bars" 设置为 "When scrolling"

如何让滚动条显示在 Mac 的 Chrome 中？

.StickyContainer {
  border: 1px solid green;
  width: 350px;
  height: 180px;
  overflow: auto;
}

.StickyContainer__box {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  position: sticky;
  top: 0;
}

<div class="StickyContainer">
  <div class="StickyContainer__box">Box 1</div>
  <div class="StickyContainer__box">Box 2</div>
  <div class="StickyContainer__box">Box 3</div>
  <div class="StickyContainer__box">Box 4</div>
  <div class="StickyContainer__box">Box 5</div>
  <div class="StickyContainer__box">Box 6</div>
</div>

Answer 1

Chromium 问题跟踪网站上有错误报告：

https://bugs.chromium.org/p/chromium/issues/detail?id=1033712

问题已经确认，正在调查中

目前，您可以将 will-change:transform 添加到父元素以解决此问题。

Chrome on Mac：滚动条在使用 `position: sticky` 时消失

Chrome on Mac: Scrollbars disappear when using `position: sticky`

html

css

scrollbar

sticky