bxSlider 背景图像在 chrome 中闪烁答案

【问题标题】：bxSlider background-image flickers in chromebxSlider 背景图像在 chrome 中闪烁
【发布时间】：2015-12-18 19:54:48
【问题描述】：

我有一个小问题。我使用 bxSlider 但不是<img> 我使用background-image。在 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看到它

在浏览器分辨率 1700 像素及以上时出现闪烁

【问题讨论】：

标签： javascript jquery css google-chrome bxslider

【解决方案1】：

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

useCSS

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

【讨论】：

谢谢。好的，我终于想通了。我也会回答这个问题，也许它可以帮助某人）

【解决方案2】：

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

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

【讨论】：

嗨@Narek-T 你把-webkit-perspective: 1000px;放在哪里了？我有同样的问题，我宁愿不使用 useCSS: false.
嗨。对于.bxslider
嗨 Narek T，你有修复的演示吗？我以为我已经在你的帮助下修复了它，但它仍然存在。