[Resolved] Blinking Issue

Home Forums Support [Resolved] Blinking Issue

Home Forums Support Blinking Issue

  • This topic has 18 replies, 4 voices, and was last updated 3 years ago by Leo.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1681556
    Ian

    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.

    #1681558
    Ian

    I caught the blinking. It looks like the footer is displaying just under the header before the body loads. Is this a glitch?

    #1681563
    Ian

    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?

    #1681656
    David
    Staff
    Customer Support

    Hi there,

    can you re-enable the flexbox version and disable autoptimize so i can see what is happening ?

    #1682147
    Ian

    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?

    #1682604
    Elvin
    Staff
    Customer Support

    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.

    #1682609
    Ian

    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.

    #1682611
    Elvin
    Staff
    Customer Support

    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.

    #1682612
    Ian

    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!

    #1682622
    Elvin
    Staff
    Customer Support

    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]

    #1682625
    Ian

    Now click on each top nav item. They are all category archives. That’s where the blinking occurs, inside category archives.

    #1682642
    Ian

    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!

    #1682643
    Elvin
    Staff
    Customer Support

    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.

    #1682664
    Ian

    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?

    #1682987
    David
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.