Code Block的Scroll Bar会在某些情况下卡死

[leimao]

确保你在提交Bug反馈之前仔细阅读了Hexo文档，Icarus用户指南，和GitHub issues来了解你的问题是否已经被他人提出过。

Bug描述 页面载入后，如果立刻滑动code block里的scroll bar，scroll bar会卡死。

系统与环境

• 操作系统 Ubuntu 22.04。
• Hexo Icarus版本及配置均为官方的5.2.1版本Release。
• 有问题的浏览器版本 Brave [Version 1.48.164 Chromium: 110.0.5481.100 (Official Build) (64-bit)] Chrome [Version 110.0.5481.100 (Official Build) (64-bit)] 这个问题其实存在很久了，以往的Chromium内核的浏览器浏览code block的时候也有这个问题。

复现方式 列出复现这个Bug的步骤，如：

1. 直接访问Hexo Icarus的官方Demo站点页面 https://ppoffice.github.io/hexo-theme-icarus/uncategorized/hexo-built-in-tag-helpers/
2. 在Linux的Chrome内核的浏览器内，立刻滑动code block里的scroll bar，scroll bar会卡死（见截图）。Linux下的火狐浏览器似乎没有这个问题。MacOS下的Chrome内核的浏览器似乎也没这个问题。

期望行为 Code block的scroll bar应当在任何操作系统任何浏览器内体验丝滑。

截图

额外上下文 无

[ppoffice]

@leimao 禁用浏览器的GPU加速有帮助么？是所有Chromium内核的浏览器都会卡顿么？有没有可能是Linux Desktop Composer或者Chromium的问题呢？

[leimao]

@leimao 禁用浏览器的GPU加速有帮助么？是所有Chromium内核的浏览器都会卡顿么？有没有可能是Linux Desktop Composer或者Chromium的问题呢？

您还别说，我把Chrome还有Brave的Hardware Acceleration关了，似乎滑动的那下就不卡了。这个问题貌似只存在Linux的Chromium内核的浏览器里（至少测试了Chrome和Brave）。另外，Linux下的Firefox我看了下，Hardware Acceleration也是开了的，但是就是不卡。

[ppoffice]

那很有可能是浏览器内核或者GPU驱动的问题。我在Ubuntu 22.04 + Chrome 110.0.5481.100 + RTX 3090 (驱动版本 525.78.01)上没有复现这个问题。

[leimao]

那很有可能是浏览器内核或者GPU驱动的问题。我在Ubuntu 22.04 + Chrome 110.0.5481.100 + RTX 3090上没有复现这个问题。

巧了，我们是一样的配置和Chrome，不过我驱动是515.86.01。不过这个问题应该不是一天两天了，我用Icarus一年多以来始终都有。而且如果是GPU驱动问题的话，Firefox应该也要存在这个现象，但是至少Firefox使用正常。

如果想复现这个问题，得刷新页面后，快速把鼠标移动到scroll bar上，马上拖动。不然加载完时间一长，可能就正常了。

[leimao]

快速把鼠标移动到scroll bar上，马上拖动。不然加载完时间一长，可能就正常了。

您可以反复刷新拖动，一般来说三四次下来应该会有一次卡死。

[ppoffice]

那很有可能是浏览器内核或者GPU驱动的问题。我在Ubuntu 22.04 + Chrome 110.0.5481.100 + RTX 3090上没有复现这个问题。

巧了，我们是一样的配置和Chrome，不过我驱动是515.86.01。不过这个问题应该不是一天两天了，我用Icarus一年多以来始终都有。而且如果是GPU驱动问题的话，Firefox应该也要存在这个现象，但是至少Firefox使用正常。

如果想复现这个问题，得刷新页面后，快速把鼠标移动到scroll bar上，马上拖动。不然加载完时间一长，可能就正常了。

你关闭GPU加速或者使用Firefox没有出现这个问题，很大程度上说明目前Icarus的JavaScript或者CSS实现并没有问题。而且Icarus并没有使用任何自定义滚动条的JavaScript库，所以不太可能是JavaScript导致的。

你可以尝试注释掉这几行代码来禁用自定义滚动条样式。如果依然卡顿，那基本上就能确定是Chromium内核的问题了。

[leimao]

那很有可能是浏览器内核或者GPU驱动的问题。我在Ubuntu 22.04 + Chrome 110.0.5481.100 + RTX 3090上没有复现这个问题。

巧了，我们是一样的配置和Chrome，不过我驱动是515.86.01。不过这个问题应该不是一天两天了，我用Icarus一年多以来始终都有。而且如果是GPU驱动问题的话，Firefox应该也要存在这个现象，但是至少Firefox使用正常。 如果想复现这个问题，得刷新页面后，快速把鼠标移动到scroll bar上，马上拖动。不然加载完时间一长，可能就正常了。

你关闭GPU加速或者使用Firefox没有出现这个问题，很大程度上说明目前Icarus的JavaScript或者CSS实现并没有问题。而且Icarus并没有使用任何自定义滚动条的JavaScript库，所以不太可能是JavaScript导致的。

你可以尝试注释掉这几行代码来禁用自定义滚动条样式。如果依然卡顿，那基本上就能确定是Chromium内核的问题了。

我刚删除了您指出的那几行代码，本地测试了一下删除前和删除后的效果（分别测试了十多次），删除前会卡，删除后不卡。

[leimao]

我虽然不是很懂CSS，但是似乎::-webkit-scrollbar并不是推荐使用的标准函数。

[leimao]

因为Firefox不支持这个函数，所以Firefox没有这个问题？ https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#css.selectors.-webkit-scrollbar

[ppoffice]

@leimao ::-webkit-scrollbar 是Webkit下广泛使用的CSS伪元素。我依然认为这是浏览器的bug而非Icarus。

[leimao]

@leimao ::-webkit-scrollbar 是Webkit下广泛使用的CSS伪元素。我依然认为这是浏览器的bug而非Icarus。

没事，我只是反馈一下用户体验。不晓得有没有其他用户在相似的环境下也有类似的感受，说不定我只是少数者，那么也就没有必要特地去换一种实现方式。

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.