--header-offset 在 Safari 中与粘性元素一起使用速度很慢 (iPadOS 15.6)

错误
1

Discourse 上的粘性元素（CSS position: sticky）在我的 iPad（第 9 代，所有系统均已更新）上一直有些卡顿。滚动时会轻微抖动，对突然改变滚动方向的反应迟钝，有延迟。

随着新侧边栏（也是一个粘性元素）的引入，这种情况变得更加明显，因为它占据了 UI 的很大一部分，而且不太稳定。

罪魁祸首是 --header-offset 变量。在 CSS 中移除此变量可以使 UI 的粘性元素稳定下来，正如它应该的那样。

默认情况下，页眉高度为 4em。我已将时间轴、粘性头像和侧边栏的 CSS 中的 --header-offset 变量替换为 4em，以计算它们的位置：

.d-header
{
    box-sizing: border-box;
    height: 4em;
}

.sidebar-wrapper
{
    top: 4em;
    height: calc(100vh - 4em);
}

@media screen and (min-width: 925px)
{
.container.posts .topic-navigation
    {
        top: 6em;
    }
}

.topic-post.sticky-avatar .topic-avatar
{
    top: 3.75em;
}

（box sizing 存在是因为我的页眉有边框，这与问题无关）

我对这个变量的功能感到好奇，据我所知，页眉的高度从未改变过，除了改变文本大小，并且使用 em 作为其高度可以解决这个问题。

我不知道是否有办法优化 Safari 移动版上的 --header-offset，但我的解决方法解决了这个小性能问题。当粘性元素真正粘性十足时，Discourse 看起来更加精致 :slight_smile:

（我在台式机的 Firefox 或 Chrome 上使用这些元素没有任何问题，所以这可能是 Safari 的一个 bug）

1 个赞
3

这通常与自定义主题有关，但正如您所指出的，像 font-size 这样的情况也会影响标题的高度。在标题比默认高度高或矮的情况下，我们会在 JS 中计算 header-offset 以调整页面上的其他元素，这样它们就不会落在标题下方。

无论如何，我看到了这个问题，这确实很刺眼：

但是，如果我在 CSS 中将 --header-offset 设置为静态值：

也许我们计算和更新 offset 的频率太高了？我们会做一些调查……Safari 在 iOS 上进行了很多优化，这可能会导致问题。

4 个赞
8

我已经为此添加了一个修复程序：FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub
请尝试一下，并让我知道它是否解决了您的问题，@vincefrommtl。

7 个赞
9

这完美地解决了问题，非常感谢 :slight_smile:

2 个赞
10

该主题在 4 天后自动关闭。不再允许回复。