1232055 - When div is set to display: table, overflow: hidden doesn't work (overflowing abspos content leaks out)

Status: REOPENED

(Core :: Layout: Tables, defect, P3)

Description

[marlon.marcello]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20151123004034

Steps to reproduce:

Create on div and another div inside it with and image.
Set the parent div to position relative and display table.
Overflow the child div or pseudo element from the parent div.

This is a link to reproduce the problem: http://cssdeck.com/labs/full/tv6qvvmh


Actual results:

You can still see the child div.


Expected results:

Part of child div that's overflow should be hidden.

Comment 1

[Boris Zbarsky [:bzbarsky]]

I can't reproduce this: the only thing overflowing here is the positioned generated content, and the overflowing part of it is in fact hidden.

Comment 2

[Daniel Holbert [:dholbert]]

I don't know if the original testcase actually demonstrates the issue (it's not clear to me), but I did actually run into the exact bug that's being described here when diagnosing https://github.com/webcompat/web-bugs/issues/21298 -- I'll attach a clearer testcase.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (most of the text is clipped in Chrome; none is clipped in Firefox)

Comment 4

[Daniel Holbert [:dholbert]]

Edge agrees with us, so this might be a Chrome bug.

[investigating a bit]

OK, so this is a fun outcome of the fact that tables are really several nested boxes, with one anonymous wrapper box to contain the table and the (possibly-present) table-caption.

It looks like all browsers agree that "position:relative" makes the *table wrapper box* (including the caption) into an abspos containing block.  So e.g. if I add a caption to the table in the attached testcase and I give the abspos thing "top:0", then the abspos thing snaps to the top of the caption.  Firefox, Edge, and Chrome all agree on this behavior.

But for "overflow:hidden", Firefox and Edge apply that to the *table box*, whereas Chrome applies it to the *table wrapper box*.

This means that for Firefox and Edge, the abspos containing block is the parent of the clipping box, whereas in Chrome, the abspos containing block **is** the clipping box.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Here's a testcase to illustrate what I said above.

* Firefox and Edge clip the top of "Relpos" -- i.e. they use the table-box as the overflow:hidden clipping box.  (And the abspos element escapes the clipping because its abspos containing block is the table-wrapper-box which is an ancestor of the clipping box.)

* Chrome **does not** clip "Relpos", but it **does** clip "Abspos" -- so it uses the table-wrapper-box as the overflow:hidden clipping box (and also as the abspos containing block).

Comment 6

[Daniel Holbert [:dholbert]]

Firefox and Edge are correct here, per CSS 2 section 17.4 (where "table wrapper box" is defined):

> The computed values of properties 'position', 'float', [...etc]
> on the table element are used on the **table wrapper box**
> and not the table grid box
> 
> all other values of non-inheritable properties are used on the
> table grid box and not the table wrapper box.
https://drafts.csswg.org/css2/tables.html#model

So the spec is explicitly telling us to apply "position:relative" to the table wrapper box, and to apply "overflow:hidden" to its child, the table grid box (aka the "main" table box).

So Firefox and Edge are correct, and Chrome is incorrect in applying both properties to the table wrapper box.

Comment 7

[Daniel Holbert [:dholbert]]

Filed Chrome/Safari bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=910725
https://bugs.webkit.org/show_bug.cgi?id=192249

Comment 8

[Boris Zbarsky [:bzbarsky]]

Note that in CSS2 the 'overflow' property says:

  Applies to: block containers 

and a table box is _not_ a block container....  A table wrapper box is, but as you note the value doesn't propagate to it.

https://drafts.csswg.org/css-overflow-3/#propdef-overflow says the same thing, as far as tables are concerned:

  Applies to:  block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]

Seems like we should file some spec issues here too, because UAs do in fact apply 'overflow' on tables in various ways.

Comment 9

[Daniel Holbert [:dholbert]]

We may want to revisit this, now that EdgeHTML is going away and we're left as the only engine with our particular behavior here (and given that we've seen two webcompat.com issues where sites are depending on the Chromium/WebKit behavior)...

This may take some reverse-engineering to see what Chromium/WebKit are actually doing & if their behavior is sensible & implementable.

(Some spec clarification would be nice, too, per comment 8. But only to the extent that it matches the reality of what Chromium/WebKit do or are willing to do.)

Comment 10

[Dennis Schubert [:denschub]]

This still has breakage in the wild that causes parts of contents to be unavailable, setting P2 for now.

Comment 11

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is relatively low, S3. However, the bug has 5 See Also bugs.
:dholbert, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.

Comment 12

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The last needinfo from me was triggered in error by recent activity on the bug. I'm clearing the needinfo since this is a very old bug and I don't know if it's still relevant.

Comment 13

[Ksenia Berezina [:ksenia]]

Out of all linked issues https://webcompat.com/issues/60523 is still reproducible - I moved it to bug1890853 for tracking purposes.