弊社サービスmuragonで、モバイル版のヘッダーを固定し常に表示するようにデザインを変更しました。

その際に、Androidの標準ブラウザから見たときのみ不具合が発生していました。

今回の記事では、その不具合への対処方法と、Android4.3以前の標準ブラウザはGoogle公式からのサポートが終了しているので使わない方がいい、ということを書いていきます。

Android標準ブラウザとは？

主にAndroid4.3以前に搭載されている、地球アイコンのブラウザのことです。

今回起きた不具合

本来、画面上部に隠れていなければならないメニューの一部（うっすら見える白枠となっている部分）がとびだしていました。

今回の不具合を簡易版で表現してみると以下のようになります。

    

        position:relativeを指定したdivの中身
    

.a {
    position: fixed;
    background-color: #474646;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    overflow-y: scroll;
}
.b {
    position:relative;
    color:red;
}

Andoroid標準ブラウザ見たとき

そのほかのブラウザで見たとき

色々試してみると、position、translate、overflowの3つを指定した要素の子にposition:relativeを指定すると発生するということがわかりました。

Android標準ブラウザの方は、position:relativeを指定した要素がはみ出ている、つまりtranslateが効いていない状態となっています

対処方法

muragonではAndroid標準ブラウザはサポート外ですが、
今回のバグでは、position、translate、overflow、position:relativeのうちどれかひとつの条件が外すことができれば解消されるようだったので、
taranslateをtopに変えることで対応しました。

Android標準ブラウザについて

このように、Android標準ブラウザは予期せぬバグが発生したりと、開発者泣かせではあります。
また、Android4.3以前の標準ブラウザについてはGoogle公式のサポートが終了しています。
https://internet.watch.impress.co.jp/docs/news/685459.html
つまりセキュリティ的に危険があります。
そのほかのWebサイトでもAndroid標準ブラウザはサポートしていないことがあり、デザインが正常に表示されないこともあります。
そのため、Androidであるならば標準ブラウザではなくChromeなどのブラウザを利用することが、ユーザーにとっても開発者にとっても安心であると言えます。