High CLS in navigation block on mobile

  • New, empty wordpress installation of 6.4.3 and twenty twentyfour and gutenberg plugin 17.7.0 (and SVG Support for the logo I used, but i’m not sure if it matters, could be PNG).

    Add a logo for the site.

    The CLS on mobile is now 0.55. In the animated give, you can see the menu starts out full, and then shrinks, the body moves up.

    I have made an animated gif showing the CLS here https://www.agilicus.com/www/tt4-cls.gif

    and the header json is here https://www.agilicus.com/www/tt4-header.json

    I am uncertain if this relates to gutenberg plugin or not.

    On my live site (https://www.agilicus.com/) I am seeing this CLS, above is the smallest reproduction I could come up with.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter donbowman

    (@donbowman)

    this might be related:

    https://github.com/WordPress/gutenberg/issues/58672

    Moderator jordesign

    (@jordesign)

    Hi @donboman – good find with that GitHub issue. It does seem very likely it is related to that. It would be a good place to follow along for resolution.

    The only other thing I’d suggest checking is if there’s any javascript minification, or other plugins that might be affecting that.

    Could you please attempt to disable all plugins and if the problem goes away, enable them one by one to identify the source of your troubles.

    If you can install plugins, install and activate “Health Check”: https://www.ads-software.com/plugins/health-check/
    It will add some additional features under the menu item under Tools > Site Health.
    On its troubleshooting tab, you can Enable Troubleshooting Mode. This will disable all plugins, switch to a standard WordPress theme (if available), allow you to turn your plugins on and off and switch between themes, <strong>without affecting normal visitors to your site</strong>. This allows you to test for various compatibility issues.

    There’s a more detailed description about how to use the Health Check plugin and its Troubleshooting Mode at https://make.www.ads-software.com/support/handbook/appendix/troubleshooting-using-the-health-check/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘High CLS in navigation block on mobile’ is closed to new replies.