Question

我正在使用jQuery使背景图像看起来是固定的（因为背景附件：固定不具有play nicely背景大小：封面）。在某些环境中，图像不会闪烁，但在其他环境中则不会闪烁，我无法弄清楚原因。（一个相关但不同的问题是here，但我没有使用视差滚动。）

它不闪烁here和this fiddle：

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#bg').css('background-position', 'left ' + scrolledY + 'px');
});

body {
  height: 3000px;
  margin: 0;
}

#bg-wrap {
  position: relative;
  width: 100%;
}

#bg {
  height: 600px;
  width: 100%;
  position: relative;
  background-attachment: scroll;
  background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover!important;
}

#bg-text {
  position: absolute;
  top: 200px;
  left: 47%;
  font-size: 3rem;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
  <div id="bg">
  </div>
  <div id="bg-text">Hello!</div>

使用Webkit和Edge浏览器时闪烁here（但不会在IE和Firefox上闪烁）。

超过here它会闪烁，直到通过点击“地区地图”标签初始化Google地图。

对于理解原因并提供可能的解决方案的任何帮助将不胜感激。

Answer 1

尝试使用：

transform-style:flat

关于闪烁图像的css规则

或

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

Answer 2

虽然我仍然不知道导致test page问题的原因，但我通过删除流氓CSS转换来解决原始问题！

Webkit和Edge（jQuery和vanillaJS）上滚动的生涩/闪烁背景图像

2 个答案: