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
: 244844 (view as bug list)
Depends on:
Blocks:
 
Reported: 2021-11-08 05:57 PST by Adam Seckel
Modified: 2022-09-06 08:39 PDT (History)
13 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
View All Add an attachment (proposed patch, testcase, etc.)

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].
Comment 9 Terluin Webdesign 2022-09-06 08:39:06 PDT 
*** Bug 244844 has been marked as a duplicate of this bug. ***