cagov / design-system

State of California Design System
MIT License
79 stars 25 forks source link

Bug - Base style causes CLS for image blocks #930

Closed iansvo closed 7 months ago

iansvo commented 1 year ago

https://github.com/cagov/design-system/blob/ddb7629d3c61fddf7ceecd0ea0f7a9b4927ce34f/components/base-css/src/_wordpress.scss#L47

This style causes the image to shift the height on load as the browser needs to figure out what the height is in order to layout/paint the tag.

Overall the intent of this appears to be forcing the use of object-fit, which by itself I wouldn't encourage as this shouldn't be necessary for a standard image block and might cause unexpected behavior.

My suggestion would be to remove this and perhaps look at the object-fit as an opt-in that is leveraged without using a declared width on the image (e.g. max-width only and rely on the native image size).

I've confirmed the efficacy of the fix on a local install here for this project I'm working on and just wanted to share it here. If there's any additional information needed just let me know.