从移动设备上的画布外引导布局中移除抖动效果答案

【问题标题】：Remove jerkiness effect from off-canvas bootstrap layout on mobile从移动设备上的画布外引导布局中移除抖动效果
【发布时间】：2014-11-16 05:58:27
【问题描述】：

我正在使用来自here 的引导程序的画布外布局。它的核心在于 right css 属性的动画效果，它将画布向左移动：

.row-offcanvas {
   right: 0;
   position: relative;
   transition: all .25s ease-out;
}

.row-offcanvas.active {
   right: 50%;
}

从 PC 浏览器查看时，过渡是平滑的。然而，当从 Android 的 Chrome 浏览器查看时，过渡是生涩的。如果您从 Android 设备（或任何移动设备）打开 the link，您会看到效果。
我该怎么做才能让它在移动浏览器上流畅运行？

【问题讨论】：

添加 -webkit-transition: all .25s ease-out;
另见the bleeding-edge version of the example.
@Christina，它没有任何好处，因为 Chrome 使用了没有供应商前缀的 transition 属性。
@cvrebert，它与我的方法有何不同？
它有供应商前缀的变体。我以为克里斯蒂娜的解释是正确的。

标签： android css twitter-bootstrap google-chrome

【解决方案1】：

解决方案是使用transform:translate 而不是right。

.row-offcanvas-navbar {
  position: relative;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.row-offcanvas-navbar.right.active {
  -webkit-transform: translate(-250px, 0);
  -ms-transform: translate(-250px, 0);
  -o-transform: translate(-250px, 0);
  transform: translate(-250px, 0);
  -webkit-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}

【讨论】：