mojira.dev
WEB-7327

Layout shift when hero image is loaded in new article design

When a hero image is loaded on an article, the whole page shifts downwards by a large degree. This unexpected layout shift can "disrupt the user experience in many ways, from causing them to lose their place while reading if the text moves suddenly, to making them click the wrong link or button. In some cases, this can do serious damage."

When using the Web Vitals browser extension by Google, the Cumulative Layout Shift (CLS) Core Web Vital metric on this page is measured to be at 0.36, which is rated as poor.

This issue did not exist in the previous article page design.

Attachments

Comments 8

What is a webpage where this can be reproduced?

Every article page. You can throttle your network request to make it more obvious.

Hi!

Does this issue still occurs?
In what scenarios does this issue is the most annoying?

This ticket will automatically reopen when you reply.

It is the most annoying when you have a slow connection, and you want to click a link on the page. When the header image loads, the link won't be at the same place anymore. This did not occur before the redesign

Please can you provide a link to the article where this issue occurs?

Every article page. You can throttle your network request to make it more obvious.

Is this still an issue for you?

Please provide some links to where this can be observed, and if it requires throttling network, steps to do this

https://www.minecraft.net/en-us/article/minecraft-snapshot-25w34a
or any article.

Open Chrome DevTools and select the Network tab. Disable cache and select throttling to Slow 4G. Reload the page. Observe the fact that the page is pushed down when the image loads.

dian

(Unassigned)

Confirmed

minecraft.net

Retrieved