[CSS研究所] カルーセル研究部「モーヤダ、Safariのアンカーリンク問題」

先日から、target-currentからのscroll-markerのCSS機能について調べたりライブラリを作ったり、ラジバンダリしていますが、今回はSafariのバグについて言及したいと思います。 名付けて、「Safariの見えているから内部スクロールしないアンカーリンク問題」です。

Safariのバグ内容

まずは、以下のデモをご覧ください。 GoogleChromeは、target-currentも正常に動作するので、CSSだけでカルーセル+マーカーが問題なく動いていると思います。 一方、Firefoxは、target-currentは聞いていないものの、カルーセルと、マーカークリックだけは正常に動いていて、マーカーに現在位置のマークがついていない状態です。 でも、Safariは、ヘンな動きをしています。 「アイテム-1」が見えている時に、「アイテム-2」のマーカーをクリックすると、何も動かずに、「アイテム-3」をクリックするとスクロールする・・・ これは、マーカーをクリックした先のアイテムが画面に見切れていても表示されていると、Safariは「見えてるから移動（スクロール）する必要ないじゃん」という、おせっかい機能があるらしく、スクロールをストップしてしまうのだそうです。 正直、こんな機能いらないし、ハッキリ言ってバグです。

このバグの解消法

ネットでググったり、AIに相談したり、ラジバンダリしてみましたが、まるで解決されず、結局、Javascriptを使って解決することにしました。 解決できたJavascriptは以下の通りです。 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { const targetId = this.getAttribute('href'); const target = document.querySelector(targetId); if (target) { e.preventDefault(); // デフォルトの挙動を抑制 target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' // 中央にスナップさせる }); } }); }); ページ内の、#（ハッシュ）リンクを持つリンクに対して、対象のエレメントまでスクロールさせる仕様です。 これをSafariブラウザだけで動作するようにしてもいいですが、他のブラウザで動かしても何にも問題ではないので、Polyfillとして書いておくというのは悪くないかもしれません。 ハッシュリンクの取得命令を、もう少し変更してもいいかもしれないので、その辺はTPOに合わせた形で変更して使うのがいいでしょう。

正常版アンカーリンク処理

Safariでの動作が正常になったと同時に、安定感も増して、非常にいい動きになりました。 全ブラウザでコレをデフォルトにして欲しいな〜

あとがき

本当に、インターネットブラウザのレンダリング機能において、ブラウザ特有の機能って誰も望んでないんです。 W3Cが定義してあるその通りに不具合なく表示されるだけでいいんです。 もう、本当にね、「いらんことスナ！」と、大きな声で言いたい。 過去のIEの過ちを、何度繰り返せば気が済むのか、それともそうした教訓から何も学んでいないのか、インターネットブラウザの立ち位置って、脆弱性以外のバージョンアップはいらないというのが個人的な意見です。 そして、おそらくどのWEBエンジニアも全く同じ思いでいるハズです。 機能追加は、個人の拡張機能に任せればいいんです。 Appleに届け！この想い。