Closed univers-andrew closed 4 weeks ago
Hey,
Yeah, this indeed is an issue. The non-default (in your case md) breakpoints do not have width and height set. Only the <img>
tag has it. With this HTML templating, width
and height
parameters on <img>
are used to consume the space, however for larger breakpoints this does not exist. Hence once the image has loaded in, browser uses the loaded in image dimensions to recalculate the consumed ratio.
According to the specification, <source>
tags do accept width
and height
parameters, which could be used to solve this issue. This is definitely good idea and could be added to the package, and I have thought about this before.
Two ways to solve this right now for you:
<img>
CSS to object-fit: cover
.responsiveImages.blade.php
template. This might be difficult as you may have to wrangle around a bit, but in that template you have access to $breakpoint
variable, through which you can access breakpoint parameters that you have passed through the tag (the ratio in this instance). From there you could technically calculate the width
and height
for the <source>
tags.I am seeing two different issues and would love you to create a separate issue for this (separate from breakpoint ratios one), one issue per one bug so it is easier to manage and track for maintainers.
Can you clarify again what is wrong?
I am seeing these issues myself:
Thanks.
Hey, thank you for your detailed reply, very much appreciate the insight!
Happy to create a separate issue on the placeholder issues, for maintainability's sake. To clarifiy;
Placeholder is not working at all in the first video The placeholder is working, however there is a slight CLS
In the first video I've disabled placeholders using placeholder="false"
to provide a baseline example, to help confirm the issue is created when the placeholder is enabled with placeholder="true"
In the second video, placeholder is enabled with placeholder="true"
, and you can see the slight CLS occur — on a long page with a lot of images this is can be a significant user experience issue with #anchor links, as the CLS effect becomes magnified.
Thanks again, Andrew
I can can reproduce both issues.
I have a fix for this issue. As described before, setting width
and height
on <source>
solves this issue.
For 2nd issue, this is happening because placeholder image is inlined and much smaller (32px width with height calculated from ratio), and for some reason the consumed width and height is used from this image, despite explicitly defining width/height on img/source tag. So once that small image is upscaled in resolution (while respecting it's ratio), the height ends up being off by few pixels, when comparing to the actual loaded in image dimensions.
The fix for both of these will be a breaking one and will require a major release. So for now, my previous recommendation for using parent container with aspect ratios is still good, and it's what the fix would be anyway.
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.
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.
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.
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.
Bug description
First of all, I'd like to preface my issue by saying how much of a massive fan I am of this addon — it's a joy to use when templating, and makes using Statamic so much more joyful! It's been a while since I've had the chance to use it, and I particurly appreciate some of the more recent developments.
In regards to the CLS issues I've observed, there are two distinct issues I've noticed on a site I'm currently building. Hopefully by bringing them to your attention they can be resolved within the addon, or you can point me in the direction of a suitable workaround if it's a configuration issue...
The first issue I noticed, is relevant when using breakpoint based ratios. In the following example I've used the following snippet.
{{ responsive:image alt="{alt}" ratio="1.3" md:ratio="0.75" loading="lazy" }}
https://user-images.githubusercontent.com/122848318/233290442-899aac3b-c598-43e0-a026-f4babd2d180a.mov
Unfortunately, this seems to be setting the '1.3' ratio dimensions for the width and height attributes on the image on larger screens, which causes quite a large layout shift when
placeholder="false
is enabled. Inspecting the img element in the browser showswidth="850" height="654"
in this instance.This issue only occurs if placeholders are disabled. If placeholders are used though, I am also obesrving slight CLS which I have now documented in a new issue for maintainability, which can be found here.
With thanks, Andrew
How to reproduce
{{ responsive:image alt="{alt}" ratio="1.3" md:ratio="0.75" placeholder="false" }}
Environment
Installation
Fresh statamic/statamic site via CLI
Antlers Parser
runtime (new)