Bootstrap5で開発していたアプリを、Safariで表示したところレンジのスタイルが適用されなかったので、その原因と対処法をご紹介します。
Sassでの読み込み時に発生
CDNやbootstrap.min.css、bootstrap.cssからBootstrapを読み込んでいる場合は、この不具合は発生しません。
※Bootstrapは頻繁に更新されているので、今後、このような環境でも不具合が発生する恐れがあります。
bootstrap.scssから読み込んだ場合に、この不具合が見られました。
どういうことなのか
bootstrapのレンジのスタイルが、Safariで反映されない。
Chrome（正常）↓
Safari↓
原因
Safariなどのブラウザでは、デフォルトのスタイルを無効化するCSSのプロパティである、appearanceにベンダープレフィックス1をつけなくてはならないが、Bootstrap 5のSassではベンダープレフィックスがついていないため。
ちなみに、appearanceはMDNによれば、まだ「実験的な機能」とのことです。
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
appearance (-moz-appearance, -webkit-appearance) by MDN contributors is licensed under CC-BY-SA 2.5
現時点での対応状況は以下リンクから見られます。
2021/05/04時点では、
- Chrome、Firefox、Edgeでは
appearance単独でも機能する - Safariはベンダープレフィックスが必要
- IEは、11も含めて完全に非対応
とのことです。
IEが完全に非対応とのことですが、最近はEdgeがChromiumを採用したことなどから、IEのサポートを打ち切るサイトも増えてきているので、あまり気にしなくても良いと思われます。
対処法
以下のCSSをBootstrapを読み込ませた後に追記します。
input[type="range"]{
/*レンジ全体のスタイルを整える*/
appearance: none; /*デフォルトのスタイルを無効にする*/
-webkit-appearance: none;/*Webkitの古いブラウザでデフォルトのスタイルを無効にする*/
-moz-appearance: none;/*古いFirefoxでデフォルトのスタイルを無効にする*/
}
input[type="range"]::-webkit-slider-thumb {
/*Webkitブラウザでのレンジのツマミ部分のスタイル*/
-webkit-appearance: none;
appearance: none;
}
input[type="range"]::-moz-range-thumb {
/*Firefoxでのレンジのツマミ部分のスタイル*/
-moz-appearance: none;
appearance: none;
}
対処後は、Safariでも正常に表示されました。
Bootstrap側でこの問題は修正されるのか
この問題を修正したというPull Requestがあったので、近いうちにこの不具合が修正されたものがリリースされると思われます。
（2021/05/04時点での最新版はv5.0.0-beta3なので、v5.0.0-beta4で修正されると思われます。）
そのため、Bootstrapのアップデートがないか定期的にチェックされることをおすすめします。
ちなみに、GitHubでコードを管理している場合は、Dependabotを使うとBootstrapなどのパッケージ2のアップデートを自動で確認し、Pull Requestを出してくれます。
Dependabotの設定方法についての記事を書きましたので、合わせてご覧ください。
フロントエンド強化月間
5/31まで、Qiitaでは「フロントエンド強化月間」を行っています。この記事も、「フロントエンド強化月間」に合わせて執筆されたものです。
参考
CSSのappearanceについて
Bootstrap (GitHub)