【CSS】firefoxで動作するようにしたスクロール関連の修正

はじめに

自作拡張機能をchromeからfirefoxアドオンに移行し投稿（審査待ち）したので、移行中に修正した点を記事にします。

スクロールバーの表示を消す

スクロールバーは消したいけど、ホイールや別の手段でスクロールはさせたい時のCSSです。

chrome.css

.wrapper::-webkit-scrollbar {display: none;}

firefox.css

.wrapper {scrollbar-width: none;}

これchromeでも実装しないかな。

*-reverse

flexboxを使って子要素の配置順を反転させる(row|column)-reverse。

chrome.css

.wrapper {
    display: flex;
    flex-direction: row-reverse;
    overflow: scroll;
}

firefoxでこの記述のままだとスクロール幅（rowは横、columnは縦）が可視幅と同値になり、スクロールが効かなくなった。
こんなケースは稀かもしれません。

左右のボックスを入れ替えるだけだったので、orderで対処。

firefox.css

.wrapper {
    display: flex;
    flex-direction: row;
    overflow: scroll;
}
.wrapper.reverse .right_box {order: -1;}

終わりに

他にはfont-familyのfantasyが使えなくてImpactにしたとか
font-sizeを要素でちゃんと指定しないと思うようなサイズにならなかったとか
細かい所は割愛。

※内容がわかりにくい？タイトルだったので変更しました。