Results 1 to 6 of 6

Thread: category filter causes page to "jump" / "flicker" on mobile causing layout shift

Threaded View

  1. #6
    Senior Member
    Join Date
    Dec 2023
    Posts
    161
    OK, got a 16% improvement in the lighthouse mobile score:
    1.) add css to tablet/mobile to set sidebarspace display:none on mobile/tablet so it's display none on first page load before javascript; this solves the layout shift issue.
    2.) To keep my non Filter side blocks visible, edit side_block_header and add ID BlockName to sidebarspace; add sidebarspacevisible display:block to tablet/mobile css
    3.) add to footerscript tpl javascript to change class for the other sidebar block so that it will be display none as page loads and then display block after page is complete
    Code:
    Only registered members can view the code.
    Seems to work well in testing so far.

    Then I changed the expander in css where expander is right and expander active is 0. Just swapping the position of the image so the expander shows correctly.

    A little concerning how I've added some complexity to do the same, but it does solve the flicker problem on android phones and gives a 16% improvement in the lighthouse score, so I think I'll call this a success.

    I feel a little older now than when I started this thread a day ago
    Last edited by Horizon; February 29, 2024 at 04:43 AM.