在移动时使用固定背景图像进行滚动时滞后 [英] lag when scrolling with fixed background-image in mobile

问题描述

我想要一个固定的背景图片（大约46k）的网站，它适用于我的电脑浏览器。

但是，当在我的手机浏览器上滚动时，它会重绘背景图片大约一秒。

任何想法来解决这个问题？谢谢

这是我的CSS：

  html，body {
 background：url（'/ assets / img / bg.jpg'）no-repeat center center fixed; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
  

解决方案

使用 skrollr库（演示页面，适用于移动设备）的移动设备背景。 。

（这是一个已知的问题，即固定定位元素在所有流行的移动设备上都不能很好地工作。请参阅下表，了解哪些设备支持固定位置。）

I wanna have the website with a fixed background-image(about 46k) which works on my PC browser.

However, when scrolling on my mobile browser, it lays about one second to redraw the background-image.

Any ideas to solve this? Thanks

Here is my css:

html, body {
    background: url('/assets/img/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

解决方案

You can implement a smooth fixed background on mobile using the skrollr library (demo page that works on mobile).

(It's a known issue that fixed positioned elements do not work well across all popular mobile devices yet. See this table of which devices support fixed positioning.)

这篇关于在移动时使用固定背景图像进行滚动时滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！