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

Question

我正在制作一个 adapted/responsive 移动网络应用程序。我有一个工具栏位于我的计算机浏览器屏幕的右侧，它应该固定在移动设备屏幕的底部。奇怪的是，当使用 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

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

有两种方法可以解决这个问题。有关 Javascript 解决方案列表，请参阅 Brad Frost 的这篇文章：http://bradfrost.com/blog/mobile/fixed-position/

或者尝试上面提到的 Ben Frain 修复：https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

另请参阅 Ben Frain 的 CodePen：http://codepen.io/benfrain/full/wckpb

Answer 2

如果加{left: 0}解决不了，估计是.sidebar-nav-right的父节点有transform；那么位置原点已经重置。

Answer 3

我觉得@GoreWang 的评论很到位。您应该尝试以下两件事：

(1) With fixed position, sometimes not having a left 属性 set causes the fixed element to not appear页面加载时。尝试添加以下内容：

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

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

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

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

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

Div bottom toolbar appearing on iPhone but not on Android

android

css

iphone

responsive

adapt