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%;
}

demo

Answer 3

更新宽度和高度解决了我的问题。

Webkit：使用背景图像闪烁CSS过渡

3 个答案: