Safari 中的滚动锚定

/

TL;DR

Safari > Settings > Feature Flags > CSS Scroll Anchoring

背景

在 Safari 浏览器中访问 ChatGPT 或 DeepSeek 等基于大语言模型的对话网站1时,每输出一段文字,网页就会随着输出的内容向下滚动,而且这个滚动既不均匀,也不平滑,让人非常烦躁。尤其是在下面一种情况发生时:

AI 已经输出了一段我需要的代码,但还在不停地输出其它内容。这时,想要复制我需要的那段代码的最佳方式就是鼠标点击代码框右上角的 Copy 按钮2。然而,此时的浏览器页面正随着最新的输出不断向下滚动,且每次滚动的幅度无法预测,甚至偶尔还会回滚几下。我必须趁着 Copy 按钮还没滚出我的屏幕,用触摸板以最快的速度多次定位、点击,才能成功 Copy。

但是在 Chrome 浏览器中,一切都是正常的:不论 AI 输出到哪里,浏览器页面都固定在同一位置。只有当我划到页面最下方时,才会像 Safari 那样随着最新的输出不断滚动。

这是我遇到的一个很难描述的问题,解决方案非常简单,但是检索确很困难,因为这涉及到了 Scroll Anchoring 这个概念:如果你已经知道了这个概念,那你根本就不会被这个问题困扰,打开设置动动鼠标就解决了;但如果你还不知道这个概念,那么提炼出适当的关键词并在搜索引擎中搜索就是一件很困难的事。我在挺久之前就遇到了这个问题,用 Safari 滚动 锚定 锁定 3等关键词在搜索引擎中搜索无果,最终的解决方案是换成 Chrome。

解决方案

后来我又换到了 Safari,再次被这个问题气到发疯,然后意识到这也许与浏览其中的某些特性有关。

于是我在 Safari > Settings > Feature Flags 中找到了 CSS Scroll Anchoring,启用后即可解决问题。如果你看不到 Safari > Settings > Feature Flags,你需要在 Safari > Settings > Advanced 最下方勾选 Show features for web developers

另一个问题

BTW,我在 Safari 中遇到了另外一个问题,没有找到解决方案:

在 BiliBili 中播放视频时,长按右方向键可以倍速播放。但是在按下与松开右方向键时会卡顿、爆音。这很烦,因为我还挺喜欢这个倍速播放功能的。在 Chrome 中则没有卡顿、爆音的情况。我已经搜索过这个问题,没有找到解决方案,甚至没找到同样遭遇这个问题的人;我也尝试着排列组合了 Feature Flags 中的几个有关 MediaAudio 的选项,都没有作用。如果你知道有什么解决方案,请你告诉我。

脚注

  1. 我写到这才意识到我居然不知道诸如 ChatGPT 与 DeepSeek 的这类网站应该统称为什么。人工智能网站?大语言模型网站?对话网站?似乎都有些歧义。姑且称之为「基于大语言模型的对话网站」,等我想到更好的名字之后,我也许会回来替换掉它。 ^

  2. 我最近一直在使用 Poe,至少在 Poe 中每个代码块右上角都会有一个 Copy 按钮,至于别的网站我就不清楚了。 ^

  3. 这真的算最贴合此问题的几个关键词了吧,但是搜到的都是有关 CSS 中 overflow-anchor 属性的内容,并不能解决我的问题。 ^