Bug 12934 – Table cells need to act like box-sizing border-box in the vertical direction

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Tables

[Jeppe Utzon]

I discovered a CSS (?) bug in Safari that concerns padding and table cell size. If I have a fixed size table cell (width and height specified) then when I add CSS padding to this cell it will grow beyond the size specified even though the content would have fit easily inside the original sized cell. It's hard to explain in text, but look at the example code I put online and it will all make sense. :) Tested this in both the current latest consumer realease of Safari and in the nightly build. The cells behave correctly (are the same size) in Firefox

Cheers, Jeppe Utzon

[Jeppe Utzon]

Created attachment 13435 [details]
Test case of the padding bug

[Dave Hyatt]

Need to support the box-sizing quirk of border-box in the vertical direction for heights.

[Sam Weinig]

Are we certain this is a bug.  In quirks mode, the webkit rendering matches firefox.

[Lev Solntsev]

Created attachment 109145 [details]
Testcase for table cells height calculation.

Yep, certain bug. Box-sizing:border-box should affect table cell height. I've made a test case for that; for Webkit the second row does matter.

BTW, Firefox have own bug: https://bugzilla.mozilla.org/show_bug.cgi?id=295315

[Ben Frain]

This issue is still present in current Safari release (OS X 6.0.5 (8536.30.1)) and the WebKit nightly (r153759). Here is a reduction test case. You can toggle the box-sizing rule in the CSS box and see the difference. Compare on Safari and Chrome/Firefox to see what should happen.

http://codepen.io/benfrain/pen/zqCKs

[Brent Fulgham]

Safari, Chrome, and Firefox produce the same rendering for both test cases. I believe any compatibility issue has been resolved since 2013.