DIV底部工具栏出现在iPhone上，但没有在Android上出现

Question

我正在制作一个适用/响应移动设备的Web应用程序。我有一个工具栏，该工具栏位于我的计算机浏览器上的屏幕右侧，应该将其放置在移动设备上的屏幕底部。奇怪的是，当使用iPhone打开它时，工具栏看起来正确固定在底部，但是当我在Android设备上打开应用程序（例如我的三星Galaxy S5）时，该工具栏根本不会出现。进行一些测试，当我将样式更改为相对而不是固定时，该工具栏在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;
}

这种样式位于媒体查询中，以供较小的屏幕尺寸，如上所述，正在适应一个品牌的移动设备，因此我知道媒体查询没有问题。

Answer 1

如果添加{left：0}无法解决，我想也许.sidebar-nav-right的父节点具有转换。然后位置来源已重置。

Answer 2

这是较旧的Android浏览器的常见问题。只需将-webkit-backface-visibility: hidden;添加到固定元素。

有两种解决此问题的方法。有关JavaScript解决方案的列表，请参见Brad Frost的这篇文章：http：//bradfrost.com/blog/mobile/mobile/fixed-position/

或尝试Ben Frain的上述修复程序：https：//benfrain.com/easy-css-fix-fix-fix--fixed-positioning-and android-2-2-2-3/

也请参见Ben Frain的此Codepen：http：//codepen.io/benfrain/full/wckpb

Answer 3

我认为 @gorewang的评论是现实的。您应该尝试以下两件事：

（1）带有固定位置，有时没有左属性集会导致固定元素加载时不出现固定元素。尝试添加以下内容：

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

（2）添加以下代码到您的固定元素：

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

这迫使Chrome使用硬件加速度连续绘制固定元素并避免这种奇怪的行为。（已知错误）