Browser rendering flash using CF and AJAX

New Here ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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?

Views

179

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 09, 2021 May 09, 2021

Copy link to clipboard

Copied

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:

forum.png

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:

BKBK_0-1620561667101.png

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

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 09, 2021 May 09, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 10, 2021 May 10, 2021

Copy link to clipboard

Copied

quote

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? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

LATEST

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines