Safari flickers when image tag is replaced by the same

Question

Our Safari/Mac users report flickering of image on a page segment which is periodically updated by AJAX call. We are not able to reproduce the behavior in Chrome/Firefox/IE on Win and Linux, not even Chrome on Mac.

We do not have a Mac available for development, so I can only sometimes ask a friend to check it for me. I prepared a simplified test case: https://jsfiddle.net/tgb1jaog/1/

We use IMG element which is inside the refreshed div, but is always the same and on the same position for given page and it blinks on each refresh when viewed in Safari - on real page and on jsfiddle too (first div).

I tried to change it to CSS background set by STYLE on DIV in place of the original IMG, that seems to work fine on jsfiddle (second div), but blinks the same way on our real page.

I am going to try to define the background in external css and give the div only a class (jsfiddle third div), but as the test case behavior differs I am not sure it will help.

All those work well using different browser.

Is it some kind of a bug in Safari (I was not able to find any reference)? Or are there some ways how to make Safari work as others?

function replace(id, data) {
    $("#" + id).empty();
    $("#" + id).append($.trim(data));
    $("#" + id).hide();
    $("#" + id).show()
}
function d1() {
    replace("d1", '<img src="https://live.victoriatip.cz/images/baseball-header.jpg" width="797" height="69" />');
}
function d2() {
    replace("d2", '<div style="background: url(https://live.victoriatip.cz/images/baseball-header.jpg); width: 797px; height: 69px;"></div>');
}
function d3() {
    replace("d3", '<div class="b"></div>');
}
setInterval(d1, 2000);
setInterval(d2, 2500);
setInterval(d3, 3000);

#d3 .b {
    background: url("https://live.victoriatip.cz/images/baseball-header.jpg");
    width: 797px;
    height: 69px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clearfix" id="d1"></div>
<div class="clearfix" id="d2"></div>
<div class="clearfix" id="d3"></div>

Answer 1

It turns out Safari will re-request an image if the cache has expired, even if it's already in memory (unlike Chrome, Firefox etc). If you look at the Safari debug tools while your jsfiddle is running you'll see the server requests piling up (they return a 304 but it's enough to cause the flicker).

This image in your jsfiddle example: https://live.victoriatip.cz/images/baseball-header.jpg is set to expire straight away - Expires: Wed, 19 Aug 2015 14:26:53 GMT.

If you tweak your cache headers the problem should go away.

Here's an updated jsfiddle with a google image that caches: https://jsfiddle.net/tgb1jaog/2/.