bxSlider 背景图像在 chrome 中闪烁

Question

我有个小问题。我使用 bxSlider 但我使用 background-image 而不是 <img>。在 chrome 中，我看到了一些闪烁，但我无法摆脱它。也许有人有类似的问题，请告诉我如何治疗:)

这是我的代码

$('.bxslider').bxSlider();

.bxslider {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.bxslider li {
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul class="bxslider">
  <li style="background-image: url(http://lorempixel.com/1920/400/sports)"></li>
  <li style="background-image: url(http://lorempixel.com/1920/400/city)"></li>
</ul>

你也可以在JSFiddle

中看到它

浏览器分辨率 1700px 及更高时出现闪烁

Answer 1

有个选项useCSS可能和闪烁有关，设置为false看看。

useCSS

If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.
default: true
options: boolean (true / false)

Answer 2

我终于明白了。感谢@Pangloss，因为他的回答告诉我在哪里可以找到真正的问题。真正的问题是 -webkit-perspective 因为 bxSlider 使用 transform: translate3d()。关于 -webkit-perspective 你可以在这里阅读 CSS-Tricks, here and MDN。

在这种特殊情况下，我的解决方案是 -webkit-perspective: 1000px;。没有闪烁，我们将继续使用没有 JS 的 CSS 转换 :)

bxSlider 背景图像在 chrome 中闪烁

bxSlider background-image flickers in chrome

javascript

jquery

css

google-chrome

bxslider