iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう

Webkit系ブラウザの拡張で、スクロールバーをカスタマイズするCSSの疑似要素に、「::-webkit-scrollbar」というのがあります。
参考:::-webkit-scrollbar – CSS: Cascading Style Sheets | MDN
参考:CSSでスクロールバーをカスタマイズ – Qiita

iPadやiPhoneなど、標準ではスクロールできる要素でも、デフォルトだとスクロールバーがでないので、「::-webkit-scrollbar」の機能を利用してスクロールバーを表示させるということを行っていました。例えば、下記のような感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webkit Scrollbar</title>
    <style>
    .container{
        height:200px;
        width:200px;
    }
    #scroll{
        overflow:auto;
        font-size:20px;
        height:100%;
    }
    #scroll::-webkit-scrollbar {
        width:5px;
    }
    #scroll::-webkit-scrollbar-track {
        border-radius: 10px;
        box-shadow: inset 0 0 6px green;
    }
    #scroll::-webkit-scrollbar-thumb  {
        background-color: blue;
        border-radius: 10px;
        box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
    }
    </style>
</head>
<body>
    <div class="container">
        <div id="scroll">
            あいうえお<br>
            かきくけこ<br>
            さしすせそ<br>
            たちつてと<br>
            なにぬねの<br>
            はひふへほ<br>
            まみむめも<br>
            やゆよ<br>
            らりるれろ<br>
            わをん<br>
        </div>
    </div>
</body>
</html>

サンプル:Webkit Scrollbar

これを、iOS13にアップする前の端末で見てみると下記のようになります。

青と緑のスクロールバーが表示されてるのが分かると思います。しかし、iOS13にアップデートすると、このスクロールバーのスタイルが無くなってしまいました。

もちろん、スクロール自体はできます(スクロールしている最中は、デフォルトのスクロールバーのスタイルのスクロールが表示されます)。

独自拡張だから無くなっても不思議ではないけど、なぜ無くしたのだろう。

コメント

タイトルとURLをコピーしました