Chrome treats % height on display:table element as box-sizing:border-box |
||||
Issue descriptionVersion: 50.0.2661.11 dev (64-bit) OS: Ubuntu 15.10 What steps will reproduce the problem? (1) Load attached testcase. 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.) Firefox and Edge both give EXPECTED OUTPUT. I can make Chrome give EXPECTED OUTPUT too by changing any of the following things: - replacing the % height with an explicit pixel height. - changing the orange thing to be display:block instead of display:table.
,
Mar 26 2016
Live version of testcase: https://jsfiddle.net/do8n64Lq/
,
Mar 26 2016
Two reference cases, each of which only have one small change from the original:
1)Removed "display: table":
https://jsfiddle.net/do8n64Lq/1/
2)Replaced percent height with pixel height:
https://jsfiddle.net/do8n64Lq/2/
Each of these give EXPECTED RESULTS in chrome -- the orange element does stick out, as it should. So, this problem is specific to %-height display:table elements.
,
Mar 26 2016
WebKit instance of this bug (Safari 9 behaves just like Chrome 50 here, because this bug probably predates the Blink/WebKit fork): https://bugs.webkit.org/show_bug.cgi?id=155919
,
Mar 28 2016
,
Feb 9 2017
Realistically we're not going to fix this until the big table rewrite.
,
Feb 27 2018
Looked into this some, but probably won't be fixed anytime soon. https://jsfiddle.net/dgrogan/7sdxt8th/5/ FF and Edge seem to include box-sizing:border-box in the UA stylesheet for <table>. Chrome seems to sometimes emulate it without actually setting the CSS property. But chrome erroneously uses the emulation when a <div style="display:table"> has % height specified. (But not for px height, as pointed out in comment 3.)
,
Feb 28 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/88182a1b277a19642a857836461cbf4fa7d64dd8 commit 88182a1b277a19642a857836461cbf4fa7d64dd8 Author: David Grogan <dgrogan@chromium.org> Date: Wed Feb 28 19:13:22 2018 [css-tables] Test that tables have box-sizing:border-box by default Legacy layout erroneously sets box-sizing:border-box on non-table elements that have display:table when the element has a specified % height. Only <table> elements should have box-sizing:border-box. Bug: 598134 Change-Id: I66a4a6380ca60a88516a63d3df84faabd709d4c0 Reviewed-on: https://chromium-review.googlesource.com/940561 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#539916} [modify] https://crrev.com/88182a1b277a19642a857836461cbf4fa7d64dd8/third_party/WebKit/LayoutTests/TestExpectations [add] https://crrev.com/88182a1b277a19642a857836461cbf4fa7d64dd8/third_party/WebKit/LayoutTests/external/wpt/css/css-tables/table-has-box-sizing-border-box-001.html [add] https://crrev.com/88182a1b277a19642a857836461cbf4fa7d64dd8/third_party/WebKit/LayoutTests/external/wpt/css/css-tables/table-has-box-sizing-border-box-002.html |
||||
►
Sign in to add a comment |
||||
Comment 1 by dholb...@gmail.com
, Mar 26 2016497 bytes
497 bytes View Download