Content Layout Shift (CLS) when transitioning from placeholder blur to actual image

univers-andrew commented 1 year ago

Bug description

When placeholders are enabled, I am observing a CLS when the placeholder switches with the final images. Seems to happen in every instance where I've set ratio=".75" on this site — the issue doesn't present if I've set ratio="1".

https://user-images.githubusercontent.com/122848318/233290483-3caaf15a-d6dc-4b87-9823-a8b6657d1945.mov

The video above shows no CLS occurs when placeholder="false"

https://user-images.githubusercontent.com/122848318/233290468-dbae9a5a-238b-4f72-88f9-6eabc289fc86.mov

The video above shows CLS occuring when using the standard placeholder setting.

It's entirely possible I've missed something, but thought it would be worthwhile to pose the question to see if this could be an issue within responsive-images, or my own error. Seems like an issue with the backend calculations, but I could be wrong.

With thanks, Andrew

How to reproduce

{{ responsive:url alt="{alt}" ratio="0.75" glide:width="1000" }}

Similuate a slow connection and observe CLS when the placeholder swaps out.

Logs

No response

Environment

yaml
Statamic 3.4.7 Pro
Laravel 8.83.27
PHP 8.1.13
Stache Watcher Enabled
Static Caching Disabled
dryven/faviconator 1.0.2
spatie/statamic-responsive-images 3.1.3
statamic/ssg 1.3.0

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

runtime (new)

Additional details

No response

spatie-bot commented 10 months ago

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.

spatie-bot commented 6 months ago

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.

spatie-bot commented 2 months ago

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.

spatie / statamic-responsive-images