りんごが好きなのでぃす

Mac/iPhone/iPadなどに関する話題を届け続けて今年で地味に24年目

Big Sur (Safari 14.x) でYouTubeのスクロールが引っ掛かる現象に対処する方法

f:id:kjx130:20201227114422p:plain

Big SurのSafari……というかSafari 14.xで起きている現象だと思うのですが、YouTubeのページスクロールが "引っ掛かる" という現象が起きています。

挙動は文字通り "引っ掛かる" という感じで、スクロールを再開させると『んーーーーぬっ………んぱっ!』とまるで画面が粘着しているかのような動きを見せます。

動画を見るだけならスクロールする用事はないと思うので気にならないと思いますが、コメントを読もうとするとほぼほぼ常に引っ掛かるのでストレス半端ありません。

もし同じ現象に悩まされている場合は、解決方法がMacRumorsのフォーラムに載っていたやり方を以下に紹介しますのでお試しあれ。

完璧……ではありませんが、かなり改善されると思います。

カスタムCSSを作成する

YouTubeのサイトで使用されている特定のスタイルシート(CSS)が引っ掛かりの原因になっているらしく、該当部分をリセット(unset)させることで対処しているようです。

以下、作成手順:

  1. テキストエディット.appを開く
  2. "新規書類" を作成する
  3. フォーマットメニューから "標準テキストにする" を選択
  4. 以下の囲みに紹介しているテキストをそのままコピペ(以下の画像参照)
  5. ファイルメニューから "保存…" を選択
  6. 任意の名前を付け、拡張子を ".css" として保存(例:fix youtube scroll.css):保存先は書類フォルダ内など各自が分かりやすい場所へ
  7. 拡張子が "css" で良いのかの確認を求めるダイアログが出るので[".css"を使用]を選択

f:id:kjx130:20201227120913j:plain

テキストエディット(標準テキスト)にコピペした例


使用するスタイルシート(CSS):

// ==UserScript==
// @name FixYouTubeScrolling
// @description Stop improper styling, Google
// @match *://*youtube.*
// ==/UserScript==
ytd-page-manager {
overflow-y: unset !important;
}

#page-manager.ytd-app {
overflow-x: unset !important;

カスタムCSSをSafariに設定する

次に、以下の手順で作成したCSSをSafariに設定します: 

  1. Safari.appの環境設定>"詳細" タブを開く
  2. スタイルシートのプルダウンメニューを開き "その他…" を選ぶ
  3. 先ほど保存したCSSファイルを指定する
  4. Safari.appを終了させる

f:id:kjx130:20201227121121j:plain

プルダウンから"その他…"選んでCSSファイルを指定

これで、次にSafariを起動させた時から追加したCSSファイルの記載内容が反映されるようになり、YouTubeでのスクロール問題が解決された状態で閲覧可能になります。

時々指定を解除して確認を

いずれApple、あるいはYouTube側で問題の解決が図られればここで紹介したCSSの設定は不要になります。

なので、週に1回とか半月に1回くらいを目安にSafariに設定したカスタムCSSを解除("未選択"を選ぶ)してYouTubeの挙動を確認してみてください。

設定しっぱなしでも問題はないと思いますが、解決されて必要なくなれば登録は解除しておいた方が想定外のトラブルに出くわす可能性を減らせます。

引用元:

forums.macrumors.com