Divの下部ツールバーはiPhoneでは表示されますが、Androidでは表示されません。

Question

私はモバイルに対応した/応答するウェブアプリを作っています。私は、コンピュータのブラウザ上で画面の右側に配置されているツールバーを持っていて、モバイルの画面の下部に固定されているはずです。奇妙なのは、iPhoneを使用して開いたとき、ツールバーが下部に正しく固定されているように見えますが、Samsung Galaxy S5などのAndroidデバイスでアプリを開くと、ツールバーが表示されません。いくつかのテストを行うと、スタイリングを固定ではなく相対に変更したとき、ツールバーはiPhoneとAndroidの画面の中央に同じ位置に表示されます。その問題はどういうものだと思いますか？ここで

はコードです：

<div class="col-sm-2"> 
<div class="sidebar-nav-right"> 
    <div class="navbar navbar-default navbar-style" role="navigation"> 
    <div class="nav">'; 
    <a class="brand font-26 block brand-color">Tools</a> 
    <ul class="nav navbar-nav center"> 
    <li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li> 
    <li><a href="javascript:;" class = "font-16">Item 2</a></li> 
    <li><a href="javascript:;" class = "font-16">Item 3</a></li> 
    </ul> 
    </div> 
    </div> 
</div> 
</div> 

.sidebar-nav-right{ 
width: 100%; 
position: fixed; 
bottom: 0px; 
border-top: 1px solid black; 
} 

このスタイリングはので、私はそこではありません知っている小さな画面サイズのメディアクエリ内にあると、上述したように、1つのブランドのモバイルデバイスに適応されますメディアクエリの問題。

Answer 1

を追加した場合は{ left：0}で解決できない場合は、.sidebar-nav-rightの親ノードが変換されている可能性があります。位置原点はリセットされています。

Answer 2

これは古いAndroidブラウザでよく発生する問題です。固定要素に単に-webkit-backface-visibility: hidden;を追加します。

これを解決するには2通りの方法があります。 Javascriptのソリューションのリストについては、ブラッド・フロストことで、この記事を参照してください：http://bradfrost.com/blog/mobile/fixed-position/

それともベンFrainにより、上記の修正をしてみてください：https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

は、同様にベンFrainことで、このCodePenを参照してください：http://codepen.io/benfrain/full/wckpb

Answer 3

私は@ GoreWangのコメントは上のスポットだと思います。あなたは、次の2つのことを試してみてください：

（1）では時々左のプロパティセットは、ページがロードされたときに表示されないように固定要素を起こし持っていない、位置を固定しました。以下を追加してみてください：

.sidebar-nav-right { 
    left: 0; 
} 

（2）があなたの固定要素に次のコードを追加します

.sidebar-nav-right { 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0); 
} 

これは継続的に固定された要素をペイントし、この奇妙な行動を避けるために、ハードウェアアクセラレーションを使用するようにChromeを強制的に（既知のバグ）