Bug 232816 - Rendering bug with height: min-content, position: absolute, and box-sizing: border-box
Summary: Rendering bug with height: min-content, position: absolute, and box-sizing: b...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-11-08 05:57 PST by Adam Seckel
Modified: 2021-11-09 06:36 PST (History)
12 users (show)

See Also:


Attachments
Screenshot of incorrect webkit rendering (9.04 KB, image/png)
2021-11-08 05:57 PST, Adam Seckel
no flags Details
Test case (400 bytes, text/html)
2021-11-08 07:41 PST, zalan
no flags Details
Patch (4.37 KB, patch)
2021-11-08 15:48 PST, zalan
no flags Details | Formatted Diff | Diff
Screenshot with the patch applied (810.11 KB, image/png)
2021-11-08 16:23 PST, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Adam Seckel 2021-11-08 05:57:04 PST
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
Comment 1 Radar WebKit Bug Importer 2021-11-08 07:33:59 PST
<rdar://problem/85154265>
Comment 2 zalan 2021-11-08 07:41:32 PST
Created attachment 443544 [details]
Test case
Comment 3 zalan 2021-11-08 07:44:03 PST
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
Comment 4 Adam Seckel 2021-11-08 07:45:23 PST
(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.
Comment 5 zalan 2021-11-08 15:48:13 PST
Created attachment 443624 [details]
Patch
Comment 6 zalan 2021-11-08 16:23:09 PST
Created attachment 443628 [details]
Screenshot with the patch applied
Comment 7 Antti Koivisto 2021-11-09 06:13:38 PST
Comment on attachment 443624 [details]
Patch

nice fix!
Comment 8 EWS 2021-11-09 06:35:57 PST
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].