ここ 10 年ほどフロントエンドをやっている人ならこう言う場面に出くわしたことがあると思います。
この新しい JS と CSS のフィーチャーはめっちゃ良さそう！使って見よう！
やった！Chrome でテストして見たら思った通りに動いた！
他のブラウザーもテストしようと…はい、だめでした 😢
私はこうなったことがあるしこれを読んでるあなたもそうでしょうね。
実はと言うと、こう言うブラウザーの互換性の問題はフロントエンドでありきたりすぎて最近 Mozilla さんがやって来たWeb DNA Report 2019で性別、国籍、フロントエンドをやっている経歴など関係なくダントツで一番の苦痛として選ばれました。
そして、最近で言えば大体 Chromium のチームは一番最初に新しい JS と CSS のフィーチャーを導入するけど、それを使いたいとサポートしていないブラウザーのために Polyfill を入れないといけないし Polyfill が存在しないともう使えなくなります。
しかし、この記事のタイトルから察したと思うがいつもそうとは限りません。
今回は Chrome もときどきおかしなことをする例を見せようと思います。
問題
私が今作っているプロジェクトでデザイナーは縦型のプログレスバーを入れようとしていました。
そのプログレスバーはいくつかのパーツに別れていてプログレスをそのパーツを通すグラディエントで見せる仕組みでした。
ザッと言えばこんなものです。
最終的にデザイナーは別案で行きましたがこれを最初に見たときこれをどうにか画像に頼らず CSS だけで作れないかな〜って思いました。
調べた結果background-size: coverと background-attachment: fixedとbackground-image: linear-gradient(params)の組み合わせで私がやりたいことに大変近いことができると知りました。
これを知って浮かれていた、早速テストしようと思ってこのコードでやってみました。
これを複数のブラウザーでテストしたら以下の通りになりました。
ちょっと待って！？ 😵
見ての通り Mac OS 版の Chrome はちゃんと表示できるのにも関わらずなぜか Android 版の Chrome だけがこれをちゃんと表示できません。
これを不思議に思いました、Chrome はモバイルでも PC でも大体同じフィーチャーに対応しているのですから。
調べれば調べるほどおかしいと思いました。
CanIUseによると Android 版の Chrome でこれはちゃんと表示できるはずです、しかも iOS 版の Safari では表示できないはずです。
でもテストの結果はこれとは全く違うことになりました。 😵
理由を見つけ出す
いろいろなことを調べている内にこのStackOverflow の質問を見つけました。
ここでの答えによるとbackground-attachment: fixedはしばらくは対応されていたがパフォーマンスに影響が出ると言う理由でモバイルでの対応を切りました。
これにはある程度納得できるけど、iOS 版の Safari や Android 版の Firefox や IE11 までも対応しているのに Android 版の Chrome は対応していないのはやはりおかしいと思います。
結論
結局のところ対応したいブラウザーで表示できて、画像や JS を使わない他のやり方を見つけられませんでした。
幸い必要がなくなったけど他に方法を知っているなら教えて欲しいところです。
伝えたいことは主に、Chromium は大変素晴らしいエンジンですし作っているチームは Web でできることを進化するためにすごくがんばっていると思いますが結局のところ他のブラウザーと同様フィーチャーに対応したいかどうかをわりと勝手に決めることはできます。
もちろん、IE や Chromium ではない Edge や Safari に比較すればものすごく稀な例ですがこれがいつでも起こり得るのでそれを忘れてはいけないと思います。
他にこれと似たものに出会ったことはあるならぜひコメントで教えてください、勉強になります。