Browser rendering flash using CF and AJAX

[Dgcotton]

We host a CF app for a department that has an image and information display on the page. The use Ajax via JS to update the image without having to re-post the entire page. On Chrome or Edge Chromium the "image" flashes each time the ajax call is made to refresh the content. It does not do this in FF. The content refreshes every 3 seconds. You can see the time in the upper right hand corner

It does this on the Dev server as well.

Both are Windows Server 2016

Prod is CF2021 Enterprise

Dev is CF2018 Enterprise

Link for the two videos with the page simplified for demonstration purposes.

Chrome w/flashing: https://youtu.be/UgpUneYlb2E

FF w/out flashing:  https://youtu.be/n4qbZ3zzGGc

Thoughts on how to resolve the rendering flash?

[BKBK]

You explain and document the issue well. 🙂

I downloaded your 2 videos and watched them using Media Player Classic - Home Cinema. At 0.06x speed, you can clearly see the difference. The Chrome image does indeed flicker, and the FF image does not.

However, I saw something else. Though you talk of "the image", the Chrome movie showed that there are in fact 3 images:

There is an order in which the 3 images appear in the Chrome movie.

Image 1 stays fixed, unchanging, throughout. At 3-second intervals (2:30:52, 2:30:55, 2:30:58, 2:31:01), images 2 and 3 disappear simultaneously for an instant, then reappear. 

But they don't reappear simultaneously. Image 2 reappears a fraction of a second before image 3. In fact, at 2:30:58, you can see only images 1 and 2:

This leads me to think that the difference in behaviour between Chrome and Firefox might be due to a difference in their caching.

[Dgcotton]

Hi BKBK, are you referring to the browser cache? clearing cache and incognito mode don't improve the page. The developer has an additional CF2021 server setup for DEV and it doesn't do the flash for any browser. I have compared the console settings for both and don't see any differences.

Any debugging ideas?

[BKBK]

Hi BKBK, are you referring to the browser cache? clearing cache and incognito mode don't improve the page.

By @Dgcotton

Oh, OK. Then we can rule that out.

Any debugging ideas?

Compare the HTML (in particular, the Javascript) of a page in which the image flickers with that of a page in which it doesn't. Anyway, could you share the AJAX code? 

[Dgcotton]

Here is the contents of the page:

<script>
// Function to change the location, does an ajx all and reload the page
function changeloc(ploc) {
if (ploc === ''){
var selectBox = document.getElementById("location");
var locid = selectBox.options[selectBox.selectedIndex].value;
}
else {
var locid = ploc;
}

$.ajax({
cache: false,
type:"POST",
url: "changeloc.cfm",
data: {
locationID: locid
},
success: function(){
location.reload(true);
}
});
}

// Function to refresh the data, does an ajax call.
/* $(document).ready(function(){
$("#currentdata").load("getcurrentdata_test.cfm");
setInterval(function() {
$("#currentdata").load("getcurrentdata_test.cfm");
}, 3000);
}); */

$(document).ready(function(){
var update = function(){
$('#currentdata').load('getcurrentdata_test.cfm');
};

var auto_refresh = setInterval(function(){update();}, 3000);
update();
});

</script>

<!--- Division to display data --->
<div class="col-xs-12 col-lg-9 container">

<div id="currentdata">
</div>

</div>