Bug 155919 - Safari/WebKit ignores vertical padding on a display:table element with 100% height
Summary: Safari/WebKit ignores vertical padding on a display:table element with 100% h...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Unspecified OS X 10.11
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, WPTImpact
Depends on:
Reported: 2016-03-25 21:23 PDT by Daniel Holbert
Modified: 2023-04-25 23:50 PDT (History)
4 users (show)

See Also:

testcase 1 (497 bytes, text/html)
2016-03-25 21:24 PDT, Daniel Holbert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2016-03-25 21:23:42 PDT
 1. Load attached testcase, or this jsfiddle: https://jsfiddle.net/do8n64Lq/

  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.) 

  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)
Comment 1 Daniel Holbert 2016-03-25 21:24:26 PDT
Created attachment 274972 [details]
testcase 1
Comment 2 Daniel Holbert 2016-03-26 10:53:35 PDT
Chrome/Blink instance of this bug:
Comment 3 Ahmad Saleem 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!