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

Question

当我将一些数据刷新到包含背景图像的 div 时出现问题。 chrome.

背景图片闪烁

请自行查看 Chrome:

编辑：检查下方，等待 10 秒，前 2 张图片将开始闪烁。我将它们托管在我用于我的网站的类似服务器上（这是我制作的朋友的 wordpress）。终于找到问题的感觉真好！

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);
}

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

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

<div id="refresh">
</div>

如何解决这个问题？

Answer 1

我无法重现您的问题，但 CSS 一点技巧通常会有所帮助：

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

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

或者，如果这不是解决方案，您还可以通过将此添加到您的背景元素来 "force" 硬件加速：

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

Answer 2

好的，无论如何，当我在我的 htaccess 中切换到生产环境时，Chrome 上的问题就会消失。就是这样！

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

Background image flickering on chrome / jquery post + div refresh

jquery

google-chrome

refresh

flicker

blink