155919 2016-03-25 21:23:42 -0700 Safari/WebKit ignores vertical padding on a display:table element with 100% height 2025-12-08 04:16:31 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 9 Unspecified OS X 10.11 NEW https://bugs.webkit.org/show_bug.cgi?id=303746 BrowserCompat, InRadar, WPTImpact P2 Normal --- 1 dholbert karlcow ahmad.saleem792 bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1178240 0 dholbert 2016-03-25 21:23:42 -0700 STR: 1. Load attached testcase, or this jsfiddle: https://jsfiddle.net/do8n64Lq/ EXPECTED OUTPUT: The orange area should extend outside of its container. (Its height:100% resolves to the height of its container -- and then it has explicit pixel-valued vertical padding on top of that, which should make it taller.) ACTUAL OUTPUT: The orange area is only as tall as its container. (It seems to be ignoring its padding.) Chrome 50 and Safari 9 give ACTUAL OUTPUT. Firefox and Edge both give EXPECTED OUTPUT. I can adjust the testcase to make Chrome and Safari give EXPECTED OUTPUT with either of the following tweaks: - Changing the orange thing to be display:block instead of display:table: https://jsfiddle.net/do8n64Lq/1/ (working) - Replacing the % height with an explicit pixel height. https://jsfiddle.net/do8n64Lq/2/ (working) So, this works correctly with blocks in general, and with tables that have an explicit pixel height -- but it does not work with percent-height tables, as demonstrated in the attached testcase (and the original version of my jsfiddle with no /[number]/ suffix) 1178241 1 274972 dholbert 2016-03-25 21:24:26 -0700 Created attachment 274972 testcase 1 1178286 2 dholbert 2016-03-26 10:53:35 -0700 Chrome/Blink instance of this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=598134 1903482 3 ahmad.saleem792 2022-10-05 11:54:53 -0700 I am able to reproduce this bug in Safari Technology Preview 154 and it show "organe" bar to be constrained within container while all other browsers (Chrome Canary 108 and Firefox Nightly 107) being overflowed. It was fixed in Chrome / Blink due to TableNg project in Chrome 91. Thanks! 1951278 4 ahmad.saleem792 2023-04-25 23:50:06 -0700 table-has-box-sizing-border-box-002.html ^ https://wpt.fyi/results/css/css-tables/table-has-box-sizing-border-box-002.html?label=master&label=experimental&aligned=&q=table-has-box-sizing-border-box Live link - http://wpt.live/css/css-tables/table-has-box-sizing-border-box-002.html 2011945 5 webkit-bug-importer 2024-02-08 15:27:08 -0800 <rdar://problem/122587242> 2162190 6 karlcow 2025-12-01 07:12:40 -0800 Pull request: https://github.com/WebKit/WebKit/pull/54635 274972 2016-03-25 21:24:26 -0700 2016-03-25 21:24:26 -0700 testcase 1 test.html text/html 497 dholbert PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAuY2F0SW1n QmtnIHsKICAgICAgICBoZWlnaHQ6IDEwMHB4OwogICAgICAgIHdpZHRoOiAyMDBweDsKICAgICAg ICBib3JkZXI6IDJweCBzb2xpZCBncmF5OwogICAgICB9CgogICAgICAudGJsIHsKICAgICAgICBk aXNwbGF5OiB0YWJsZTsKICAgICAgICB3aWR0aDogMjBweDsKICAgICAgICBoZWlnaHQ6IDEwMCU7 CiAgICAgICAgYmFja2dyb3VuZDogb3JhbmdlOwogICAgICAgIHBhZGRpbmctYm90dG9tOiA1MHB4 OwogICAgICB9CgogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICBPcmFuZ2UgZWxl bWVudCBzaG91bGQgc3RpY2sgb3V0c2lkZSBvZiBpdHMgY29udGFpbmVyIChiZWNhdXNlIGl0IGhh cyAxMDAlIGhlaWdodCBwbHVzIDUwcHggb2YgdmVydGljYWwgcGFkZGluZykuCiAgICA8ZGl2IGNs YXNzPSJjYXRJbWdCa2ciPgogICAgICA8ZGl2IGNsYXNzPSJ0YmwiPgo=