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

Facebook にシェア
Pocket

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

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

サンプル:Webkit Scrollbar

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

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

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

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

iOS13にしたら、同期処理のAjax後のwindow.openができなくなった

Facebook にシェア
Pocket

今まで、Ajax後にwindow.openで新規ページを開きたい場合、同期処理でAjaxを呼ぶようにすると(それをAjaxといっていいか微妙ですが…)、ポップアップブロックをオンにしていてもページを開くことができました(参考:Ajaxでポップアップブロックを回避する方法 – LAZE SOFTWARE)。例えば下記のような処理です。

Ajaxの書き方が古いとか言われそうですが、xhr.openの第3引数でfalseを指定すると、非同期ではなく、同期処理になります。こうすることで、ポップアップブロックしていても今までなら

ですが、iOS端末でiOS13(もしくはiPadOS13)にアップデートすると、同期処理のAjaxでもwindow.openが機能しなくなってしまいました(泣)。

ちなみに、window.openの返り値はwindowオブジェクトではなく、nullになります。nullならポップアップを許可してくださいとメッセージをだすことができそうです。

なお、もう一つの対策として、Ajaxを呼ぶ前に空のページでwindow.openを呼んでおくという方法があるようです。
参考:クリックイベントの中で非同期処理したあとに別ウィンドウで開くときにポップアップブロックにひっかからない方法 – Webtech Walker

これでうまくいけそうですね。一つ欠点としては、Ajaxで判断してエラーなどがあった場合も新しいウィンドウが開いてしまいますが、その場合は、「w.close()」で閉じればいいだけです。