这是新开发的功能吗……？
今天刷新页面时无意中发现本站顶端会出现随机的诗。
控制变量法尝试：
①换了成Safari浏览器，顶端不会出现
②用Chrome换了别的网站浏览，顶端也不会出现
所以是用Chrome浏览时限定的功能吗？
我真的很想知道答案。
控制变量法尝试：
①换了成Safari浏览器，顶端不会出现
②用Chrome换了别的网站浏览，顶端也不会出现
所以是用Chrome浏览时限定的功能吗？
我真的很想知道答案。
这是本站增加更多可选的配色风格的时候添加的。
但是为什么是增加更多可选的配色风格的时候添加的呢？缘由非常复杂。
页面最上面写着「M系镜像」的那一横条菜单栏，显然是不随着页面本体一起滚动的，而是单独在一个 position: fixed 图层。这里的 position: fixed 指的就是不随页面本体一起滚动。
而不在一个图层的话，就存在一个问题：页面本体的图层渲染时，会忽视位于另一个图层的菜单栏，而重新从最顶部开始排版，因此，最上面的内容就会被菜单栏遮住。例如下图所示（菜单栏做了半透明处理，以便演示）：
对于这个问题，Bootstrap 的官方文档是这么建议的：
但后来当添加了更多可选的配色风格时，问题来了：不同配色风格的菜单栏高度是不一样的，例如 sandstone 风格中菜单栏高度是 56 像素，lux 风格中菜单栏高度是 88 像素。继续使用一个固定的内边距值，就没法适配不同的配色风格；而单独测量并适配每个配色风格的菜单栏高度又太麻烦，且不优雅。
所以，我的解决方案就是在页面本体的最顶端添加一个假菜单栏。假菜单栏位于页面本体里面，而非 position: fixed 图层。因为它依然是一个菜单栏，所以它的高度永远会和真实菜单栏的一致。这样一来，真菜单栏的高度正好会盖住假菜单栏，而页面本体真正的内容紧随其后，就正好不会被真菜单栏盖住。
假菜单栏里也必须要填写文字内容，才能正确渲染。我当时就随便往里面写了点啥，心想「反正它永远会被真菜单栏遮住，用户永远都看不到」。
我开发测试时一切顺利，假菜单栏确实永远都不会被看到。但当我准备上线了，在我主人的设备上测试时，我惊讶地发现，「下拉刷新」时，假菜单栏里的文字竟然会漏出来——就像楼主看到的一样。
事实证明这是仅在部分操作系统上才会有的「允许向上滚动超过边界」，或称为「overscroll」的行为。我自己开发测试时使用的都是 Linux 和 Android 设备，最初才根本没发现。因为，即使是相同版本的 Chrome 或 Firefox，在 Linux 和 Android 上也都不会有 overscroll 行为，在 macOS 上却会有这样的行为。
既然假菜单栏偶尔会漏出来，那里面的内容就还是别随便写了。不知道放点什么，我干脆放句诗在那里好了。而这既然是色情网站，大多数候选词句就都是从《花间词》里面选的。
那么，下一个问题：为什么在 Safari 里反而看不到呢？我考究了一下，发现如我所料，Safari 果然是这年头最烂的浏览器。制定浏览器标准的 W3C 讨论组里提起过这个问题：《Whether to move position:fixed elements during overscrolling》，并在 2022 年给出了结论：
而上述 W3C 讨论链接中也指出，Safari 并未遵循这一结论，而是认为 overscroll 不同于正常的页面滚动，因此即使是 position: fixed 元素也应该随页面本体一起 overscroll。因此，在 Safari 中，真假菜单栏永远同步滚动，假菜单栏也就永远不会漏出来了。
但是为什么是增加更多可选的配色风格的时候添加的呢？缘由非常复杂。
页面最上面写着「M系镜像」的那一横条菜单栏，显然是不随着页面本体一起滚动的，而是单独在一个 position: fixed 图层。这里的 position: fixed 指的就是不随页面本体一起滚动。
而不在一个图层的话，就存在一个问题：页面本体的图层渲染时，会忽视位于另一个图层的菜单栏，而重新从最顶部开始排版，因此，最上面的内容就会被菜单栏遮住。例如下图所示（菜单栏做了半透明处理，以便演示）：
对于这个问题，Bootstrap 的官方文档是这么建议的：
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.也就是说，为了避免 overlap，在页面本体上面添加一个固定的留白（内边距）就好了。以前我就是这么做的，页面本体顶部固定添加一个 44 像素的内边距。
但后来当添加了更多可选的配色风格时，问题来了：不同配色风格的菜单栏高度是不一样的，例如 sandstone 风格中菜单栏高度是 56 像素，lux 风格中菜单栏高度是 88 像素。继续使用一个固定的内边距值，就没法适配不同的配色风格；而单独测量并适配每个配色风格的菜单栏高度又太麻烦，且不优雅。
所以，我的解决方案就是在页面本体的最顶端添加一个假菜单栏。假菜单栏位于页面本体里面，而非 position: fixed 图层。因为它依然是一个菜单栏，所以它的高度永远会和真实菜单栏的一致。这样一来，真菜单栏的高度正好会盖住假菜单栏，而页面本体真正的内容紧随其后，就正好不会被真菜单栏盖住。
假菜单栏里也必须要填写文字内容，才能正确渲染。我当时就随便往里面写了点啥，心想「反正它永远会被真菜单栏遮住，用户永远都看不到」。
我开发测试时一切顺利，假菜单栏确实永远都不会被看到。但当我准备上线了，在我主人的设备上测试时，我惊讶地发现，「下拉刷新」时，假菜单栏里的文字竟然会漏出来——就像楼主看到的一样。
事实证明这是仅在部分操作系统上才会有的「允许向上滚动超过边界」，或称为「overscroll」的行为。我自己开发测试时使用的都是 Linux 和 Android 设备，最初才根本没发现。因为，即使是相同版本的 Chrome 或 Firefox，在 Linux 和 Android 上也都不会有 overscroll 行为，在 macOS 上却会有这样的行为。
既然假菜单栏偶尔会漏出来，那里面的内容就还是别随便写了。不知道放点什么，我干脆放句诗在那里好了。而这既然是色情网站，大多数候选词句就都是从《花间词》里面选的。
那么，下一个问题：为什么在 Safari 里反而看不到呢？我考究了一下，发现如我所料，Safari 果然是这年头最烂的浏览器。制定浏览器标准的 W3C 讨论组里提起过这个问题：《Whether to move position:fixed elements during overscrolling》，并在 2022 年给出了结论：
fixed-position elements whose scroller is not their containing block do not participate in overscroll也就是说，position: fixed 的页面元素（例如真菜单栏）既然都不参加页面的正常滚动，那在 overscroll（「下拉刷新」）时，也不应该参与。Chrome 和 Firefox 都遵循了这一规范，因此，在 overscroll 时，真菜单栏停留在原地不动，而假菜单栏随着页面本体一起向上 overscroll，就露出来了。
而上述 W3C 讨论链接中也指出，Safari 并未遵循这一结论，而是认为 overscroll 不同于正常的页面滚动，因此即使是 position: fixed 元素也应该随页面本体一起 overscroll。因此，在 Safari 中，真假菜单栏永远同步滚动，假菜单栏也就永远不会漏出来了。
chromaso：↑这是本站增加更多可选的配色风格的时候添加的。原来如此！谢谢解释，破案了。
但是为什么是增加更多可选的配色风格的时候添加的呢？缘由非常复杂。
页面最上面写着「M系镜像」的那一横条菜单栏，显然是不随着页面本体一起滚动的，而是单独在一个 position: fixed 图层。这里的 position: fixed 指的就是不随页面本体一起滚动。
而不在一个图层的话，就存在一个问题：页面本体的图层渲染时，会忽视位于另一个图层的菜单栏，而重新从最顶部开始排版，因此，最上面的内容就会被菜单栏遮住。例如下图所示（菜单栏做了半透明处理，以便演示）：
对于这个问题，Bootstrap 的官方文档是这么建议的：Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.也就是说，为了避免 overlap，在页面本体上面添加一个固定的留白（内边距）就好了。以前我就是这么做的，页面本体顶部固定添加一个 44 像素的内边距。
但后来当添加了更多可选的配色风格时，问题来了：不同配色风格的菜单栏高度是不一样的，例如 sandstone 风格中菜单栏高度是 56 像素，lux 风格中菜单栏高度是 88 像素。继续使用一个固定的内边距值，就没法适配不同的配色风格；而单独测量并适配每个配色风格的菜单栏高度又太麻烦，且不优雅。
所以，我的解决方案就是在页面本体的最顶端添加一个假菜单栏。假菜单栏位于页面本体里面，而非 position: fixed 图层。因为它依然是一个菜单栏，所以它的高度永远会和真实菜单栏的一致。这样一来，真菜单栏的高度正好会盖住假菜单栏，而页面本体真正的内容紧随其后，就正好不会被真菜单栏盖住。
假菜单栏里也必须要填写文字内容，才能正确渲染。我当时就随便往里面写了点啥，心想「反正它永远会被真菜单栏遮住，用户永远都看不到」。
我开发测试时一切顺利，假菜单栏确实永远都不会被看到。但当我准备上线了，在我主人的设备上测试时，我惊讶地发现，「下拉刷新」时，假菜单栏里的文字竟然会漏出来——就像楼主看到的一样。
事实证明这是仅在部分操作系统上才会有的「允许向上滚动超过边界」，或称为 「overscroll」的行为。我自己开发测试时使用的都是 Linux 和 Android 设备，最初才根本没发现。因为，即使是相同版本的 Chrome 或 Firefox，在 Linux 和 Android 上也都不会有 overscroll 行为，在 macOS 上却会有这样的行为。
既然假菜单栏偶尔会漏出来，那里面的内容就还是别随便写了。不知道放点什么，我干脆放句诗在那里好了。而这既然是色情网站，大多数词句就都是从《花间词》里面选的。
那么，下一个问题：为什么在 Safari 里反而看不到呢？我考究了一下，发现如我所料，Safari 果然是这年头最烂的浏览器。制定浏览器标准的 W3C 讨论组里提起过这个问题：《Whether to move position:fixed elements during overscrolling》，并在 2022 年给出了结论：fixed-position elements whose scroller is not their containing block do not participate in overscroll也就是说，position: fixed 的页面元素（例如本站的菜单栏）既然都不参加页面的正常滚动，那在 overscroll（「下拉刷新」）时，也不应该参与。Chrome 和 Firefox 都遵循了这一规范，因此，在 overscroll 时，真菜单栏停留在原地不动，而假菜单栏随着页面本体一起向上 overscroll，就露出来了。
而上述 W3C 讨论链接中也指出，Safari 并未遵循这一结论，而是认为 overscroll 不同于正常的页面滚动，因此即使是 position: fixed 元素也应该随页面本体一起 overscroll。因此，在 Safari 中，真假菜单栏永远同步滚动，假菜单栏也就永远不会漏出来了。
早上我跟群里的朋友说，结果大家都看不见只有我能看见……一瞬间变成恐怖故事了😨
笑死hhhh果然前端开发一团乱麻（）