Chromeのバージョン84以降で「もっと見る」の挙動が変な件

どんな現象？

突然ですが、お持ちのChromeブラウザで、次のCodePen内をスクロールして「もっと見る」をクリックしてみて下さい（デスクトップ・モバイルは問いません）。

ぎゃーす！何故か「もっと見る」ボタンの上にコンテンツが割り込んだのでは無いでしょうか？
これだと追加されたコンテンツが見えないから困りますね…。

「スクロールアンカリング」機能とは

Chromeでしか再現しないため、諸々調べてみて、どうやらChromeの機能「スクロールアンカリング」によることが分かりました。

Chromeがモバイルでの不快なページジャンプを追放―スクロール・アンカリングを追加 | TechCrunch Japan

「Chrome」で不快なページジャンプを抑止--「スクロールアンカリング」機能が追加 - ZDNet Japan

「スクロールアンカリング」機能とは、例えば広告の割り込みなど、JavaScriptによってコンテンツの追加読み込みがあった場合に、スクロール位置がズレてしまうのを止める機能のようでした。

記事によれば、2017年の3月7日リリースのChromeバージョン57で既にあったようです（Google公式のChromeリリースノート参照）。

でも、以前はこんな挙動はしてなかったはず？

どうやらある変更がごく最近、2020年7月14日リリースのバージョン84で行われたようでした。
検索すると、同様のお困りの意見がいくつか見つかりました。

Chrome v84/85 追加元素后 滚动条位置问题 - M.M.F 小屋

Google Chrome で操作時に不要なスクロールが発生してしまいます。 – intra-mart support

↓Google公式Chromiumの該当アップデート箇所と思われるページ↓
537603bf2f2ab1bea740bbb4137a774be76aeab5 - chromium/src - Git at Google

ScrollAnchoring: Prioritize focus/find-in-page during anchor selection.

This patch updates the scroll anchoring selection to consider

• focused element
• find-in-page active match results

アンカーの選択時にフォーカスされた要素（＝「もっと見る」ボタン）を優先する、とあります。
これの影響を受けちゃったようですね。

解決法

スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN

「もっと見る」のボタン箇所にCSS付与するのみで解決。

overflow-anchor: none;

※ 元のCodePenについてはこちらをForkしました。ありがとうございます。