Not a bug Editor bug? Images resized using "handles" now displays stretched.

Wildcat Media

Well-known member
Affected version
2.2.12
I haven't tested it here, but we post square images on one of our forums and when we upload an attachment and resize it using the handles, the images now appears stretched. In other words, I may resize it to 240px, but when looking in the editor and clicking the image to get the pixel sizes, I'll see that the editor has set 240px for width but "auto" for height.

1689887040679.webp

This worked properly for years, and only started this behavior in the past couple of weeks, so I think a Chrome update must have caused this. I just now checked MS Edge and it, too, has the same issue now.

Would the solution be for the editor to populate both fields with a pixel value rather than "auto"?

We use a third party style but this is also happening with a stock XF default style as well.
 
This might have to do with Pagespeed (?), as my uploads are converted to webp format. Yet I wonder if Pagespeed is picking up the pixel dimensions from the style in the tag and, since there is no specific height dimension, it defaults to the original image height (586px) as you can see in the image URL.

1693854454780.webp

style="width: 240px" in the img tag has no height dimension. If I manually change this to style="width: 240px; height: 240px;" then the image displays properly.

Pagespeed bug? I'm not all that fond of it and I thought I had it disabled, but, apparently not.

Note: both dimensions were added in the editor when the post was created.

1693854099207.png

Is the height not populating the style= tag? Could that be the bug here?
 
Last edited:
Disabling Pagespeed fixed the issue. Since I'm using Cloudflare, I'm thinking I could do without Pagespeed.

But still...height is not being populated even when explicitly set to 240px. Froala bug?

1693854807099.webp
 
The width and height are set to the intrinsic size of the image so the browser can reserve rendering space for it based on its aspect ratio, even if it is being resized via CSS.
 
Back
Top Bottom