NEW 155919
Safari/WebKit ignores vertical padding on a display:table element with 100% height
https://bugs.webkit.org/show_bug.cgi?id=155919
Summary Safari/WebKit ignores vertical padding on a display:table element with 100% h...
Daniel Holbert
Reported 2016-03-25 21:23:42 PDT
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)
Attachments
testcase 1 (497 bytes, text/html)
2016-03-25 21:24 PDT, Daniel Holbert
no flags
Daniel Holbert
Comment 1 2016-03-25 21:24:26 PDT
Created attachment 274972 [details] testcase 1
Daniel Holbert
Comment 2 2016-03-26 10:53:35 PDT
Ahmad Saleem
Comment 3 2022-10-05 11:54:53 PDT
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!
Radar WebKit Bug Importer
Comment 5 2024-02-08 15:27:08 PST
Note You need to log in before you can comment on or make changes to this bug.