Bug 232816 – Rendering bug with height: min-content, position: absolute, and box-sizing: border-box

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Adam Seckel]

Created attachment 443538 [details]
Screenshot of incorrect webkit rendering

Hello,

There continues to be a rendering bug when `height: min-content`, `position: absolute`, and `box-sizing: border-box` are combined in Safari, and any padding or border is also present on the element. I believe this was supposed to be resolved by https://bugs.webkit.org/show_bug.cgi?id=219944.

The rendering bug is clearly visible in this sandbox, where the height of the element is larger than its contents when a 2px border is added to the element: https://codesandbox.io/s/safari-min-content-19ccb?file=/src/App.js

This is present in version Version 15.1 (17612.2.9.1.20), as well as Safari Technical Preview: Release 134 (Safari 15.4, WebKit 17613.1.6.1). It is not present in other browsers.

Please let me know if any additional info is required!

Best,
Adam

[Radar WebKit Bug Importer]

<rdar://problem/85154265>

[zalan]

Created attachment 443544 [details]
Test case

[zalan]

Thank you for filing the bug! Unfortunately bug 219944 only fixes the next-gen layout (not yet enabled) codepath. I'll look into this shortly.

(In reply to Adam Seckel from comment #0)
> Created attachment 443538 [details]
> Screenshot of incorrect webkit rendering
> 
> Hello,
> 
> There continues to be a rendering bug when `height: min-content`, `position:
> absolute`, and `box-sizing: border-box` are combined in Safari, and any
> padding or border is also present on the element. I believe this was
> supposed to be resolved by https://bugs.webkit.org/show_bug.cgi?id=219944.
> 
> The rendering bug is clearly visible in this sandbox, where the height of
> the element is larger than its contents when a 2px border is added to the
> element: https://codesandbox.io/s/safari-min-content-19ccb?file=/src/App.js
> 
> This is present in version Version 15.1 (17612.2.9.1.20), as well as Safari
> Technical Preview: Release 134 (Safari 15.4, WebKit 17613.1.6.1). It is not
> present in other browsers.
> 
> Please let me know if any additional info is required!
> 
> Best,
> Adam

[Adam Seckel]

(In reply to zalan from comment #3)
> Thank you for filing the bug! Unfortunately bug 219944 only fixes the
> next-gen layout (not yet enabled) codepath. I'll look into this shortly.

Ahh, my mistake! Thanks for clarifying and picking this up.

[zalan]

Created attachment 443624 [details]
Patch

[zalan]

Created attachment 443628 [details]
Screenshot with the patch applied

[Antti Koivisto]

Comment on attachment 443624 [details]
Patch

nice fix!

[EWS]

Committed r285495 (244019@main): <https://commits.webkit.org/244019@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 443624 [details].

[Terluin Webdesign]

*** Bug 244844 has been marked as a duplicate of this bug. ***