html - Mac 上的 Chrome 浏览器 : Scrollbars disappear when using `position: sticky`

Question

请注意:此问题仅发生在 Mac 上的 Chrome 中。

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

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

在我的系统偏好设置中，我已将“显示滚动条”设置为“滚动时”

如何让滚动条显示在 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 添加到父元素来解决此问题。