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 ははるかに洗練されて見えます ![]()
(デスクトップの Firefox や Chrome ではこれらの要素にまったく問題はありません。そのため、Safari のバグである可能性があります)