Question

我使用css过渡使div移动，但效果很好但不在android上。

如果div是position：fixed，则没有任何反应

原来的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);
}

如果我改变位置：相对但它的粘性标题需要修复

Answer 1

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

<强> TL; DR：

这对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上，我们无法在transform元素上使用position:fixed CSS，这是一个错误。为了解决这个问题，rpsep2想法将固定位置元素包装在另一个具有position:fixed的div中，然后将原始元素的位置类型更改为position:absolute。

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

变换不适用于android上的位置固定div

1 个答案: