[已解决]github网页文档标题栏闪动

coult3

设置Windows Scrolling Personality 为enabled 后，打开github仓库内的任意 长文档 ，鼠标往下滚动时，会出现文档标题栏闪动的情况。


比如下面这个网址：
https://github.com/CorentinTh/it-tools/blob/main/README.md

复现操作：新下载百分最新64位便携版，解压缩后直接打开chrome.exe或者safemode.bat，到 chrome://flags/ 设置 Windows Scrolling Personality 为：enabled，重启浏览器，然后打开上述网页，等待页面完全加载完，往下滚动鼠标浏览页面，会发现顶栏闪动。

chrome 118.0.5993.118 和 百分最新版内核 118.0.5993.159 都有次现象。
chrome 124.0.6367.156 无此现象。

分析：
鼠标滑到某个位置：
<div class="Box-sc-g0xbh4-0 kQJlnf">
会变成
<div class="Box-sc-g0xbh4-0 kbVgFY">

同时
<div class="Box-sc-g0xbh4-0 jfjHXm">
会变成
<div class="Box-sc-g0xbh4-0 hQzvbe">

然后README.md标题栏会固定住。

关键是：鼠标继续往下滑，上面class属性值会在 kQJlnf 和 kbVgFY 来回变动；同时也会在 jfjHXm 和 hQzvbe 来回变动。

而不启用Windows Scrolling Personality，就不闪动了，正常了，正常的情况是：鼠标继续往下滑时，上面class属性值会一直保持 kbVgFY 和 hQzvbe 的状态。

ps：
<div class="Box-sc-g0xbh4-0 kQJlnf"> 的定位：

1. //*[@id="repos-sticky-header"]/div[1]/div[1]/div

复制代码

<div class="Box-sc-g0xbh4-0 jfjHXm">的定位：

1. //*[@id="repos-sticky-header"]/div[1]/div[2]

复制代码

gh0ul

经测试正常，没有来回变

S8F8ry

按描述的操作测试了下，我这边也没有办法复现这个现象。

看了下代码，是通过 Intersection Observer API 观察页面上 #repos-sticky-header 元素(一个零高度元素)的"可见性"(指该元素整体是否在当前视口内完全可见)来调整这些标题栏元素的类名。由于 #repos-sticky-header 始终是零高度的，或者换句话说它在文档中的位置不会受标题栏元素的显示变化所影响，所以我想不出能触发出这种问题的情况，难道是在某种桌面分辨率加系统缩放下可以卡出这种 bug？

另外我有在 Chromium Issues 发现一个类似这个问题的 Issue: IntersectionObserver result flicker when used on element inside "position: sticky" inside a scroller，也是观察一个 "position: sticky" 的元素然后在滚动过程中会无限触发 IntersectionObserver 的回调，问题已被分配但修复情况未知。

coult3

S8F8ry 发表于 2024-5-12 21:36
按描述的操作测试了下，我这边也没有办法复现这个现象。

看了下代码，是通过 Intersection Observer API  ...

超版就是超版，就是桌面分辨率+系统缩放的问题

win10 ltsc，桌面分辨率1920 X 1080，桌面右键，显示设置，缩放与布局，高级缩放设置，自定义缩放，如果是 125 ，就会出现此bug。但如果是100、150、200等非125% 缩放，就正常了。

新开了个虚拟机win10 ltsc 2021，分辨率1920 X 1080，按照上面的复现操作，也是125% 缩放会出现此bug，非125不出现此bug
1366×768+125%缩放 有此bug
1280x720+125%缩放 有此bug

另外这个和 position: sticky 有关系吗？

gh0ul

微软的缩放本身就是个bug，能用100尽量用100

系统100+大字号，浏览器单独开150+大字号，是1080P比较理想的用法，2K/4K什么时候微软解决模糊了再来和1080P比

S8F8ry

coult3 发表于 2024-5-12 23:16
超版就是超版，就是桌面分辨率+系统缩放的问题

win10 ltsc，桌面分辨率1920 X 1080，桌面右键， ...

那大概率就是 "position: sticky" 元素在覆盖滚动条之后滚动时元素定位会有问题。既然你用 124 内核在同分辨率和缩放下正常，那说明在后续内核应该有改动处理到这种问题(也许改动本身并不是针对此问题，而是优化过覆盖滚动条的性能等变相解决了)。