Archived topic
Blinking Issue
18 replies · Started by Ian on March 4, 2021
Not sure what happened but 2 sites that is running the latest GPP is having blink issues. Happening in Chrome and Edge. I have provided the URL to one site. Can you click on the Top Nav items. They are Categories. Most of the time, there is quick flicker like CSS is not loaded. Any ideas?
Not sure if this is related but I noticed it right after I upgraded to the latest verion.
I caught the blinking. It looks like the footer is displaying just under the header before the body loads. Is this a glitch?
Wanted to add. I found teh choosing Flexbox causes this issue. Using Floats does not.
What is the main difference between these 2 options? I chose Flexbox as I think this is the newer option?
Hi there,
can you re-enable the flexbox version and disable autoptimize so i can see what is happening ?
Hey David. Cache cleared, changed to Flexbox with Autoptimize disabled. Blinking is definitely back on Chrome. In fact, I noticed it on Float as well on my iPhone.
Noticed page caching helps to minimize it so I have disabled caching. Most prominent in Chrome Incognito mode.
Any ideas?
Hi there,
Have you sorted this out? I've checked the link provided and aside from the flashing image (that's from lazy load), I don't see the issue mentioned occurring.
I've ran the site on PSI as well and it scored 97/98 for desktop and mobile. If the mentioned issue still occurs it'll normally be flagged by something but in the tests held for the site, there isn't.
Let us know.
I had to re-enable all optimization but left it at flexbox. Do you see the footer bounce to the top before Archives fill in inside categories (Top nav)? Are you saying this is normal for Flexbox?
As I recall, this does not happen in Floats.
Assuming I'm seeing the right link ([redacted], the one provided on the private information), then no, I don't see any footer bounce to the top.
Weird bounces like that normally mean some CSS loaded late. That's usually flagged as CLS when we check it on lighthouse or Google PSI.
Sorry, can you check it again and click around in the top 5 nav items. They are all category archives. Do it inside Chrome Incognito. Thx. oh, please remove reference to my site name in your last post. Thanks!
I tested it on chrome, edge, and firefox. I also made sure I was visiting without browser caching using clear cache extensions on chrome and/or incognito.
I even recorded a test visit shown here: [video redacted]
Now click on each top nav item. They are all category archives. That’s where the blinking occurs, inside category archives.
I am testing it on my iPhone and I see lots of shifting too. It happens quick but because I know it’s there, I can see it. Hope that helps. And thank you so much Elvin!
Again, please remove that video capture of my site. Thx!
Ah I see what you mean now.
Can you try checking the archive pages with Masonry disabled to see if it still occurs? Also try to disable lazyloading images.
Hey Elvin good idea. Here is what I found.
1. Disabling lazy load with Flexbox, problem is still there.
2. Masonry On with Flexbox = problem.
3. Disabling Masonry with Flexbox gets rid of the problem even with lazy load on.
4. Using Float + Masonry, no problem even with lazy load on.
Looks like a Masonry + Flexbox problem ?
What is the difference between Float and Flexbox?
And for Float, we should check Combine CSS and Cache dynamic CSS with External File?
Hi there,
try adding the snippet i provide here - it will disable masonry on Mobile devices ( as its not required ):
https://generatepress.com/forums/topic/masonry-grid-overlapping/#post-1290416
