webkit-scrollbar 在 iOS safari 中留下轨迹线

Question

我在我的 Jekyll 博客中添加了 webkit-scrollbar。我在 css:

中使用此代码

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: rgba(253,206,147,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

效果很好，但在 iOS Safari 上，滚动条后面似乎有一条非常细的线。以下为原图：

现在看滚动条的左边，可以看到一条和实际滚动条一样宽的细线：

为什么会这样？有办法解决吗？任何建议都会很棒！

Answer 1

不过是您的渲染神器：

-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);

启用阴影：

阴影禁用：

webkit-scrollbar 在 iOS safari 中留下轨迹线

webkit-scrollbar leaves trail line in iOS safari

html

css

jekyll