Safariでスティッキー要素がある場合に`--header-offset`が遅い(iPadOS 15.6)

Discourse のスティッキー要素(CSS position: sticky)は、私の iPad(第9世代、すべて最新の状態)では常に少しぎこちないものでした。スクロール時にわずかに震えたり、急なスクロール方向の変更に悪く反応したり、遅延したりしていました。

新しいサイドバー(これもスティッキー要素です)が導入されたことで、UI のかなりの部分がそれほど安定していないため、さらに不快になりました。

原因は --header-offset 変数です。CSS でこの変数を削除すると、UI のスティッキー要素が本来あるべきように安定します。

ヘッダーの高さはデフォルトで 4em です。CSS で --header-offset 変数を Timeline、Sticky-avatar、サイドバーの 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 のバグである可能性があります)

「いいね!」 1

これはカスタムテーマに関連する傾向がありますが、指摘されているように、フォントサイズなど、ヘッダーの高さに影響を与える可能性のあるケースもあります。ヘッダーがデフォルトよりも高い場合や低い場合、JSでヘッダーオフセットを計算し、他の要素がヘッダーの下に隠れないように調整します。

いずれにしても、この問題は確認できます。これは確かに不快です。

しかし、CSSで--header-offsetを静的な値に設定すると、次のようになります。

オフセットの計算と更新が頻繁に行われすぎているのかもしれません。調査します… Safari on iOS は多くの最適化を行っており、それが問題を引き起こしている可能性があります。

「いいね!」 4

これを修正しました: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

お試しいただき、問題が解決したかどうかお知らせください、@vincefrommtl

「いいね!」 7

これは完璧に機能しました、本当にありがとうございます :slight_smile:

「いいね!」 2

このトピックは4日後に自動的に閉じられました。新しい返信は許可されていません。