Question

我有点问题。我使用bxSlider而不是<img>我使用background-image。在chrome中，我看到一些闪烁，我无法摆脱它。也许有人有类似的问题，请告诉我如何对待：）

这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

你也可以在JSFiddle

中看到它在浏览器分辨率1700px及更多

中看到的闪烁

Answer 1

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

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

Answer 2

选项useCSS可能与闪烁有关，请将其设置为false并查看。

<强> useCSS

如果true，CSS过渡将用于水平和垂直   幻灯片动画（这使用本机硬件加速）。如果是false，   将使用jQuery animate()。
default: true
options: boolean (true / false)

bxSlider背景图像在chrome中闪烁

2 个答案: