Bug 196175 - Height is calculated incorrectly when using display:table, box-sizing:border-box and padding
Summary: Height is calculated incorrectly when using display:table, box-sizing:border-...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Joonghun Park
URL:
Keywords: HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2019-03-23 03:39 PDT by Concerned user
Modified: 2022-02-04 14:30 PST (History)
14 users (show)

See Also:

Attachments
Simple HTML bug demo (1.08 KB, text/html)
2019-03-23 03:39 PDT, Concerned user 		no flags Details
Comparison of different browsers (158.89 KB, image/jpeg)
2019-03-23 03:42 PDT, Concerned user 		no flags Details
To check layout test result (2.04 KB, patch)
2021-12-12 06:13 PST, Joonghun Park 		no flags Details | Formatted Diff | Diff
Add wpt test case (11.36 KB, patch)
2021-12-13 02:10 PST, Joonghun Park 		no flags Details | Formatted Diff | Diff
Update layout test result for mac/ios (16.32 KB, patch)
2021-12-13 13:37 PST, Joonghun Park 		no flags Details | Formatted Diff | Diff
Update layout test result for mac-catalina/mojave (19.92 KB, patch)
2021-12-13 14:52 PST, Joonghun Park 		no flags Details | Formatted Diff | Diff
Patch for landing (18.73 KB, patch)
2021-12-14 20:29 PST, Joonghun Park 		no flags Details | Formatted Diff | Diff
Show Obsolete (4) 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 Concerned user 2019-03-23 03:39:42 PDT 
Created attachment 365810 [details]
Simple HTML bug demo

Using display:table is VERY common in responsive web design when some elements have fixed height and other elements should cover the remaining portion of the screen, that's how this bug has been discovered.

All major browsers handle the described scenario correctly (tested latest versions of Chrome [windows, linux], Firefox [windows, linux], Opera [windows, linux], Internet Explorer, Edge, Maxton).
All webkit based browsers handle it incorrectly (tested Safari 11, 12 and on linux: Midori and latest nightly build of Epiphany downloaded yesterday [3.31.90-6353d94e3])

Attached is a simple test page (one HTML file with css embedded - demo.html).  
Expected behavior: the demo page should have orange header, orange footer and yellow middle section. No red background should be visible, it should be fully covered. This correct behavior is observed in all non-webkit based browsers.
Current behavior: red section is visible on the bottom portion of the content div, as its height is incorrect (not 100%).

Probable cause: height calculation inside display:table child elements does not include padding values, while it should have been when box-sizing:border-box is used.
Comment 1 Concerned user 2019-03-23 03:42:02 PDT 
Created attachment 365811 [details]
Comparison of different browsers

Chromium, Firefox, IE, Epiphany
Comment 2 Radar WebKit Bug Importer 2019-03-24 13:40:37 PDT 
<rdar://problem/49199653>
Comment 3 Joonghun Park 2021-12-12 06:13:24 PST 
Created attachment 446930 [details]
To check layout test result
Comment 4 Joonghun Park 2021-12-13 02:10:34 PST 
Created attachment 446982 [details]
Add wpt test case
Comment 5 EWS Watchlist 2021-12-13 02:11:27 PST 
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Comment 6 Joonghun Park 2021-12-13 13:37:11 PST 
Created attachment 447052 [details]
Update layout test result for mac/ios
Comment 7 Joonghun Park 2021-12-13 14:52:29 PST 
Created attachment 447071 [details]
Update layout test result for mac-catalina/mojave
Comment 8 Joonghun Park 2021-12-14 20:29:30 PST 
Created attachment 447198 [details]
Patch for landing
Comment 9 EWS 2021-12-14 22:55:07 PST 
Committed r287063 (245258@main): <https://commits.webkit.org/245258@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 447198 [details].
Comment 10 Brent Fulgham 2022-02-04 14:30:16 PST 
This change should be present in STP 139, iOS 15.4 Beta, and macOS 12.3 Beta.