Recipe snippet creating content layout shifts

  • Hi, I’ve added the recipe snippet as a block at the top of the page, but every time it loads, it creates a weird jump – the buttons first appear aligned to the left and then center. The buttons also seem to be changing size. How can I fix this? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter lauratraveler

    (@lauratraveler)

    I’m also getting Avoid non-composited animations?for the Print Recipe button inside the WPRM Recipe block with the following specifications:

    Unsupported CSS Property: flex-grow

flex-grow

Unsupported CSS Property: border-left-width

border-left-width

Unsupported CSS Property: border-right-width

border-right-width

Unsupported CSS Property: margin-bottom

margin-bottom

Unsupported CSS Property: border-top-width

border-top-width

Unsupported CSS Property: margin-left

margin-left

Unsupported CSS Property: margin-right

margin-right

Unsupported CSS Property: margin-top

margin-top

Unsupported CSS Property: border-bottom-width

border-bottom-width

Unsupported CSS Property: font-size

font-size

Unsupported CSS Property: line-height

line-height
    Plugin Author Brecht

    (@brechtvds)

    Hi there,

    Could you check if your settings are as in the screenshot here?https://help.bootstrapped.ventures/article/281-prevent-cls-issues

    Thread Starter lauratraveler

    (@lauratraveler)

    @brechtvds I had Only load Assets when needed, Default Snippet Templates in Footer and Default Recipe Templates in Footer enabled. Disabling them fixed the CLS issues. But now the JS and CSS files are loading on all pages. I only have a couple of recipes, since I’m not a food blogger, so having the JS and CSS files of the recipe plugin loading on all pages is not ideal. Is there a workaround? Thanks!

    Thread Starter lauratraveler

    (@lauratraveler)

    @brechtvds I had Only load Assets when needed, Default Snippet Templates in Footer and Default Recipe Templates in Footer enabled. Disabling them fixed the CLS issues. But now the JS and CSS files are loading on all pages. I only have a couple of recipes, since I’m not a food blogger, so having the JS and CSS files of the recipe plugin loading on all pages is not ideal. Is there a workaround? Thanks!

    Plugin Author Brecht

    (@brechtvds)

    You could try copying the CSS from the snippet template (you find it under “Edit CSS” in the Template Editor) and putting that CSS in your theme files, to make sure it’s loaded in the head of the page. That way it’s already loaded before the content.

    The rest of the CSS and JS could then get loaded in the footer.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Recipe snippet creating content layout shifts’ is closed to new replies.