By Net-Config on Friday, 03 June 2022
Posted in Technical Issues
Replies 3
Likes 0
Views 366
Votes 0
Hi there, in Firefox any activity on ED5 pages works as expected with no weird flickering.

In Chrome, everything does flicker when reloading a page, which is very annoying.

I have read some things about overflow areas and z-index issues causing rendering problems, but this is all over my head. Also, turning hardware acceleration on or off does not matter either.

I have no idea if this is a Yootheme Pro template issues, an ED5 JQuery / page display issue, or a pure Chrome issue.

Are you aware of this type of a problem?

It would be cool if Chrome and Edge would work in the same stable page display manner as Firefox.......

Thoughts?
From what we researched about this flickering effect on the Chrome browser issue, it seems like this is a common issue in the Chrome browser.

Even though I tested the following non-Easydiscuss pages, it does show the same flickering effect.

https://techjobterms.com/membership
https://techjobterms.com/tech-jobs
https://techjobterms.com/topic-groups?layout=list

I believe the issue is not related to your site template since it works fine in the Firefox browser.
·
Friday, 03 June 2022 12:35
·
0 Likes
·
0 Votes
·
0 Comments
·
Update here with JavaScript code that I added to the Custom Code Script section in the Yootheme template that solves the flicker on Chrome, Edge and Safari IOS and does not create new flicker on FireFox.

I got the inspiration from this site that addresses the pure Chrome flicker piece: https://monc.se/kitchen/152/avoiding-flickering-in-jquery/

This site provided the core of the "what is the browser here?" code, which I modified to combine it with the MONC script:
https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

I focus my script on the core browsers that need to get the "stop the flicker" code, such as Edge also.

I had also noticed flicker on Safari on IOS, so added that also to the script. For any browsers not listed here, the original script has the clues on how to add those.

Best I can tell, the issue is now effectively solved and all seems to work as expected without flicker!

Wanted to share and hope others can use this also.

Here is the script itself:

// put this in here to avoid flicker in browsers like Chrome //

var sBrowser, sUsrAg = navigator.userAgent;

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Edg") > -1) {
sBrowser = "flicker";
} else if (sUsrAg.indexOf("Chrome") > -1) {
sBrowser = "flicker";
} else if (sUsrAg.indexOf("Safari") > -1) {
sBrowser = "flicker";
} else {
sBrowser = "unknown";
}

let result = sBrowser.includes("flicker");

if (result)
{
document.write('<style type="text/css">body{display:none}</style>');
jQuery(function($) {
$('body').css('display','block');
});
}
·
Monday, 06 June 2022 07:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for sharing, glad to hear you manage to find a solution to solve this.
·
Tuesday, 07 June 2022 11:03
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post