1

我使用 css 转换使 div 移动，这很好用，但不适用于 android。

如果 div 是位置：固定，则没有任何反应

原始分区：

header {
    position: fixed;
    display:block;
    top:0;
    left:0;
    height:50px;
    width:100%;
    z-index:4;
    float:left;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
}

我添加的类来移动它：

.show-left-menu {
    transform: translate(79%,0);
    -ms-transform: translate(79%,0);
    -webkit-transform: translate(79%,0);
}

如果我更改为 position:relative 但它是一个粘性标题，所以它需要修复

4

1 回答 1

1

Android 有一个错误，即使是在 4.0 上，直到 4.1+ 才修复。

TL;博士：

这不适用于Android：

<div class="side-menu"></div>

.side-menu {
  position: fixed;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

这将起作用，并且是基本的普通 CSS，因此也不会影响其他浏览器：

<div class="side-menu-fixer">
  <div class="side-menu"></div>
</div>

.side-menu-fixer {
  position: fixed;
}
.side-menu {
  position: position;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

说明： 在 Android 4.0 上，我们不能在元素上使用transforms CSS ，这是一个错误。position:fixed为了解决这个rpsep2问题，将您的固定位置元素包装在另一个 div 中的想法，position:fixed然后将原始元素的位置类型更改为position:absolute有效。

解决方案来自 rpsep2，但想将其添加为答案，因为我花了很长时间尝试在 Android 上进行这项工作，并且很高兴有一个解决方案。谢谢！

于 2014-12-18T06:45:54.453 回答