アバターがくっつく問題

[Edward_Hibbert]

カスタムテーマがあり、スクロールするとヘッダーが縮小します。最近統合されたスティッキーアバター機能が、ヘッダーが縮小する際にスラッシング動作を引き起こしていると考えています。添付のビデオを参照してください。

https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll に記載されている CSS を使用して、スティッキーアバターを無効にしようとしました。

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* 場合によっては必要になることがあります */
    }
}

これによりスティッキーアバターは非表示になりますが、スラッシングの問題は解決しないようです。これを機能させるか、機能を完全に無効にするために、他に何かすべきことはありますか？

これがスティッキーアバターの変更によるものだと100％確信しているわけではないので、他の原因だと考えられる場合はコメントしてください。

再現手順は Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community にあります。再現するにはChromeが最適です。Firefoxは最初の発生後にエラーを抑制するようです。

[awesomerobot (Kris)]

アバターが固定されていることとは関係ない問題だと思います。

ヘッダーが縮小すると、ページが短くなり、スクロール位置が変化します。そのため、ヘッダーが縮小されるべき位置にページが飛び込んだり抜け出したりすることで、ちらつきが発生します。

ブラウザのコンソールにページのスクロール位置を出力すると、これが確認できます。ヘッダーは約60px縮小され、それがちらつきとしてスクロール位置に反映されています。

これをJSで解決するには、ヘッダーのトランジションが発生するのと同時に、スクロール位置に高さの違いを追加すればよいのではないでしょうか。

CSSのみでこの問題を解決する別の方法は以下の通りです。

.d-header-wrap {
  // ヘッダーの位置を固定し、ページ高さの一部でなくします
  position: fixed;
  width: 100%;
}

#main-outlet {
  // 固定位置によりヘッダーがコンテンツの上に配置されるため、
  // 大きいヘッダーの高さ分だけページコンテンツをオフセットします
  padding-top: 150px !important;
}

[Edward_Hibbert]

どうもありがとうございます。そのCSSで確かに修正されました。大変親切です。