Question

当我将一些数据刷新到包含背景图像的div时，我遇到了问题。铬背景图像闪烁。

自行检查Chrome：

编辑：检查下面，等待10秒，前2个图片将开始闪烁。我将它们托管在我用于我的网站的类似服务器上（它是我做过的朋友的wordpress）。最终确定问题感觉很好！

＆＃13;

var list1 = window.setInterval('refresh()', 1000);

function refresh() {
  data = '<div class="pics" style="background-image:url(http://www.planetgame25.fr/TEST/cow.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(http://www.planetgame25.fr/TEST/peppers.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(https://www.processing.org/tutorials/pixels/imgs/tint1.jpg)"></div>';
  data += '<div class="pics" style="background-image:url(http://science.nasa.gov/media/medialibrary/2011/08/02/the-helix-nebula_.jpg/image_mini)"></div>';
  $('#refresh').html(data);
}

＆＃13;

.pics {
  width: 100px;
  height: 100px;
  display: block;
  background-position:center center;
  margin:5px 5px 5px 0;
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="refresh">
</div>

＆＃13;

如何解决这个问题？

Answer 1

我无法重现您的问题，但一点点CSS黑客经常会有所帮助：

尝试将此添加到您的背景元素：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

或者，如果这不是解决方案，您还可以通过将其添加到背景元素来“强制”硬件加速：

-webkit-transform: translate3d(0, 0, 0);

Answer 2

好的，非常感谢，当我在htaccess中更改为生产环境时，Chrome上的问题将会消失。就是这样！

闪烁在chrome / jquery post + div刷新的背景图像

2 个答案: