【问题标题】:background-attachment fixed chrome lag背景附件固定镀铬滞后
【发布时间】:2018-07-21 22:34:08
【问题描述】:

我的网站上的 chrome 设计再次出现问题。滚动时不会丢失 fps 和页面滞后。我花了很多圈才找到问题的真正罪魁祸首是属性background-attachment: fixed;

我试图用这个页面的解决方案来解决,但对我没有用。

https://petersproblems.wordpress.com/2014/12/06/background-attachment-fixed-causing-lag-when-scrolling/

我想使用background-attachment: fixed; 并且没有延迟,有什么解决办法吗?

CSS:

body {
    margin: 0 auto;
    background-image: url(imagen/fondo.jpg);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: top center;
}

【问题讨论】:

  • 唯一对我有用的解决方案是这个插件github.com/simov/simplr-smoothscroll。我认为您必须更改(控制)-webkit- 浏览器上的滚动来修复视差跳跃。但如果有其他解决方案,我想听听。
  • 很遗憾,世界上最常用的浏览器在设计问题上有这么多问题。你减去 Libet。它也发生在阴影中。 Firefox 在这方面没有任何问题,Edge 和 IE10 也一样。
  • stephenfry.com这里留个web 有后台和同样的卡顿问题
  • 我对此进行了斗争,发现 chrome 不允许小数边距(用于视差滚动),但默认为 1 单位。这就是为什么背景附件固定如此糟糕的部分原因。

标签: css google-chrome background lag


【解决方案1】:

只需添加-

transform:translatez(0);
-webkit-transform:translatez(0);

【讨论】:

  • 谢谢!玩过之后,我发现当修复应用于body 时,它会破坏position:fixed,但仅将它应用于应该滚动修复所有内容的批量内容元素。好吧,不完全;如果更新了 DOM,口吃会暂时恢复,但仍然比没有修复要好得多。我也只保留了-webkit-版本,因为Firefox没有问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-12
  • 1970-01-01
  • 2017-12-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多