Div底部工具栏出现在iPhone上，但不在Android上

我正在制作一款适应/响应手机的网络应用程序。我有一个工具栏，它位于电脑浏览器屏幕的右侧，应该固定在手机屏幕的底部。奇怪的是，当使用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;
}

';



.侧边栏导航右侧{
宽度：100%；
位置：固定；
底部：0px；
边框顶部：1件纯黑；
}

---

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

这是旧版Android浏览器上的常见问题。只需添加

-webkit背面可见性：隐藏到固定元素

有两种方法可以解决这个问题。有关Javascript解决方案的列表，请参见Brad Frost的这篇文章：

或者尝试Ben Frain的上述修复：

也可以看到Ben Frain的这个代码笔：
如果add{left:0}无法解决它，我想可能是.sidebar nav right的父节点进行了转换；然后位置原点被重置。
我认为@GoreWang的评论是正确的。您应该尝试以下两种方法：

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

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

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

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

这迫使Chrome使用硬件加速来连续绘制固定元素，并避免这种奇怪的行为。（已知错误）
添加top:auto；我认为这有助于您解决问题：/您可以发布桌面和移动css的完整代码吗？不幸的是，这是一大堆代码，其中大部分是使用PHP显示的。我只是不明白为什么它会在IOS设备上正确地修复底部，而不是安卓设备。我正在运行安卓6.0.1。添加webkit不起作用。