| Summary: | REGRESSION (r277997) Images get stretched with aspect-ratio and max-width: x% | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Ian Stewart <ian.c.stewart> | ||||||||||||||||
| Component: | Layout and Rendering | Assignee: | cathiechen <cathiechen> | ||||||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||||||
| Severity: | Major | CC: | bfulgham, cathiechen, changseok, esprehn+autocc, ews-watchlist, glenn, jonlee, koivisto, kondapallykalyan, pdr, rbuis, sabouhallawa, simon.fraser, svillar, webkit-bug-importer, zalan, zsun | ||||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||||
| Version: | Safari Technology Preview | ||||||||||||||||||
| Hardware: | Mac (Intel) | ||||||||||||||||||
| OS: | macOS 11 | ||||||||||||||||||
| URL: | https://gashouder.nl/partners/ | ||||||||||||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=228872 | ||||||||||||||||||
| Bug Depends on: | 228734 | ||||||||||||||||||
| Bug Blocks: | |||||||||||||||||||
| Attachments: |
|
||||||||||||||||||
Thanks for reporting this, I'll take a look today! The attached png has loaded https://gashouder.nl/partners/ Created attachment 434076 [details]
test-case
Created attachment 434082 [details]
Possible WPT test
Created attachment 434155 [details]
test-case
Added a case that img uses aspect-ratio directly.
any update on the investigation? (In reply to Jon Lee from comment #8) > any update on the investigation? Yeah, there's some progress, but still looking for an approach. This issue seems related to flex + img with aspect-ratio. * In RenderFlexibleBox::setOverridingMainSizeForChild, the img's OverridingLogicalHeight is generated by img's aspect-ratio * FlexibleBox's width. * Then we use OverridingLogicalHeight to calculate img's logical width in RenderReplaced::computeReplacedLogicalWidth. The value of width is correct until now. * But in RenderFlexibleBox::applyStretchAlignmentToChild which stretches child in the cross Axis, the logical width is changed to the intrinsic size because it has aspect-ratio and OverridingLogicalHeight. Using the intrinsic size is not right, OverridingLogicalHeight is from FlexibleBox's width, not the intrinsic size. Created attachment 434775 [details]
Patch
Created attachment 434842 [details]
Patch
Hi,
I think this patch is ready for review now.
Please take a look, thanks:)
The debugging story is long, it ends up with constrainLogicalWidthInFragmentByMinMax:)
> This issue seems related to flex + img with aspect-ratio.
>
> * In RenderFlexibleBox::setOverridingMainSizeForChild, the img's
> OverridingLogicalHeight is generated by img's aspect-ratio * FlexibleBox's
> width.
>
> * Then we use OverridingLogicalHeight to calculate img's logical width in
> RenderReplaced::computeReplacedLogicalWidth.
>
> The value of width is correct until now.
>
> * But in RenderFlexibleBox::applyStretchAlignmentToChild which stretches
> child in the cross Axis, the logical width is changed to the intrinsic size
> because it has aspect-ratio and OverridingLogicalHeight.
The image get stretched because constrainLogicalWidthInFragmentByMinMax returns the intrinsic width while computing MinSize.
Hi Antti, Thanks for the review! Created attachment 434893 [details]
Patch
Committed r280631 (240244@main): <https://commits.webkit.org/240244@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 434893 [details]. Comment on attachment 434893 [details]
Patch
It's a fake warning.
|
Created attachment 433781 [details] safari 14 & safari 15 side by side showing the image stretching problem When making an image element grow to its parent element aspect ratio seems to win from width, height => auto & max-width, -height => 100%. This results in a stretched image in safari 15 (Technology Preview 127) while in safari 14 the image sizes correctly. **not sure if this is a webkit bug or just a css styling mistake regarding the new css specs