ChromeとSafariでのCSSの効き方相違点

こんにちは、コードリックの小川です。
今回も業務中に気づいた、知っておくと今後躓くことを回避できると思ったことをご紹介します。

ChromeとSafariでのCSSの効き方が違うことは知っていますか。
なんとなく自分が作成したUIをSafariで確認した結果、効いてない上にズレてるということがありました。

■ Chromeで効くけどSafariでは効かないもの
①透明カラー( transparent )でグラデーションで使用されている場合、期待通りに機能しない。
②100vhを使用すると、予期しないスクロールが発生する。
③border-radiusとoverflow: hiddenによる角丸がアニメーション中だけ外れる。

■ 回避策
①rgbaを使用し、グラデーション設定する。
②calcを使用しheightを設定し、scriptで画面の高さを取得してプロパティを設定する。
③親要素にposition: relativeとz-index: 1を追加してスタックコンテキストを生成する。またはborder-radiusを効かせている要素にwill-change: transformを追加する。

▽ 使用ブラウザを検知する際に発見したこと
ユーザーエージェントで使用しているブラウザを検知することが大半だと思いますが、iPhoneでChromeを検知する際にひとつ驚きの発見がありました。
Safariはしっかり検知できるのにChromeは検知できなくて頭を抱えました。
iPhoneだとOS版アプリ(CriOS)というものが文字列の中にあります。
なんとこれが使用端末がiPhoneの場合に使用ブラウザChromeを検知するには文字列にCriOSが
含まれているか否かというものになります。

Chromeでは効くけど、Safariでは効かないCSSの種類は
他にもたくさんあると思いますので、こういうものもあったなどの意見お待ちしております！