当与css变换结合使用时,固定附件背景图像在铬中闪烁/消失

Question

我目前正在做一个视差网站主题.对于某些'div'和'section,需要将背景图像附加为固定的,以避免jquery沉迷于所有内容.问题是任何动画项目下方标签的背景图像在转换完成时消失,仅在Google Chrome上.补救？

Answer 1

这是一个非常普遍的未解之谜.最近我遇到了同样的问题,并且'-webkit-backface-visibility:hidden'被证明不是没用(在我的'固定'附加背景上),因为背景在设置时就消失了.(附加信息:原因是当背景设置为固定时,它几乎类似于在背景中放置固定的'div'并将原始div背景设置为透明.隐藏的背面显而易见).

要解决当前问题,请尝试将元素的" 位置 "属性设置为" 静态 ",或者如果您已经给它一些其他值,即" 相对 "," 固定 "或" 绝对 ",则只需删除它们.

如果您不记得设置位置属性,问题仍然存在,我的建议是您在chrome或firefox上使用调试工具,

确保"静态"以外的"位置"属性没有手动设置值.

只花了半个小时搜索......想到这可能会让你更容易......问候.:)

Answer 2

同样的问题在这里 我position:fixed;在PC Chrome 34中使用了闪烁的标题.我在这个主题中尝试了解决方案,position:static;在父级中打破了其他部分.但我知道添加-webkit-transform: translate3d(0,0,0);基本上会让Chrome将html变成一个层,这样它就不会被重新绘制.这对我有用.

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

更新
未来友好的答案是使用will-change属性创建一个图层!
W3规范
CanIUse
MDN定义

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

而且我会说实话,这似乎是修复闪烁的奇怪解决方案,但实质上它使元素成为一层,与translate3d()相同.

Answer 3

也许有点迟了回答,但似乎这个bug附带了背景附件:chrome中的固定属性.我找到了一个解决方案,将其值改为"滚动".它会对firefox产生jitterin效果,但你可以在你的CSS中使用媒体浏览器查询来避免它,如下所示:

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

希望能帮助到你!

Answer 4

我在使用Chrome时遇到了同样的问题,它似乎是一个错误,当页面内部出现太多时,我就能通过将以下转换代码添加到固定位置元素来修复它,(transform: translateZ(0);-webkit-transform: translateZ(0);)强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web一直在追赶,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速.

使用-webkit-transform:translate3d(0,0,0); 将GPU转换为CSS过渡的动作,使它们更平滑(更高的FPS).

注意: translate3d(0,0,0)在您看到的内容方面没有任何作用.它在x,y和z轴上移动对象0px.这只是一种强制硬件加速的技术.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

Answer 5

这真的让我很烦恼，几乎毁了我的夜晚。我的解决方法是设置

background-attachment: scroll;

它对我的项目有效。
在此之前，我已将其修复。希望这可以帮助。