css - Webkit：带有背景图像的 CSS 过渡闪烁

Question

问题描述参考如下示例：http ://codepen.io/NilsWe/pen/yoksj

.main 容器的背景在所有 webkit 浏览器中的 CSS 过渡上闪烁。
任何解决方案都像：

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;

似乎不起作用。

还有其他建议吗？

Answer 1

尝试删除

 //-webkit-backface-visibility: hidden;
 -webkit-transform: translate3d(0,0,0);
 //-webkit-transform-style: preserve-3d;

这在过去对我有用。

闪烁也可能是由于未定义被操纵元素的大小而引起的。确保定义了被操作元素的高度和宽度。

Answer 2

我认为导航栏的位置和主栏的位置有冲突。

我已将定位从浮动更改为绝对，并将事物向左移动而不是向左移动；我认为现在它工作正常

CSS

.nav, 
.main {
  position: absolute;
  height: 100%;
  padding: 5em 0 0 0;
  background: rgb(150,150,150);

  text-align: center;

  @include transition(margin-left 5s ease, margin-right 5s ease, left 5s ease);
}  

.nav {
  width: 30%;
  left: -30%;
}

.main {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  background: rgb(200,200,200);
  background: url(http://farm6.staticflickr.com/5476/9299430029_08b1ea7494_h.jpg) no-repeat bottom center;
  @include background-size(cover);
}

/* ========== active state ========== */

.active-nav .nav {
  left: 0%; 
}

.active-nav .main {
  left: 30%;
  margin-right: -30%;
}

演示

Answer 3

更新宽度和高度为我解决了这个问题。