Bug 192249 - WebKit mistakenly applies "overflow:hidden" to the table wrapper box (but should instead apply it to the inner table box)
Summary: WebKit mistakenly applies "overflow:hidden" to the table wrapper box (but sho...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Tables (show other bugs)
Version: Safari 12
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-11-30 13:32 PST by Daniel Holbert
Modified: 2022-07-01 16:18 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2018-11-30 13:32:21 PST
(Note: I filed this for Chrome as https://bugs.chromium.org/p/chromium/issues/detail?id=910725 . It affects Safari 12 as well, so I'm copypasting the bug report over here.)

STR:
(1) Load this fiddle: https://jsfiddle.net/eq65w10u/

What is the expected result?
 The higher up text *should not* be clipped (it should escape the yellow area).
 The lower down text *should* be clipped to the pink area.

What happens instead?
 The exact opposite -- the higher up text gets clipped, and the lower down text does not get clipped.


Safari's behavior indicates that it's applying "overflow:hidden" to the table wrapper box (it's performing its clipping at the level of that outer box, which is the box that encompasses the yellow caption and the pink table here).

And that is wrong, per CSS 2 section 17.4:
=====
The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' 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. (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)
=====
https://drafts.csswg.org/css2/tables.html#model

Note that this spec text says that "position" *does* apply to the wrapper box, but "overflow" is not among the specially listed properties there, so it should apply to the table grid box (the lower pink box here) -- that's the box whose boundaries we should be using for clipping.  (And the abspos higher-up text shouldn't be clipped, because its abspos CB is the wrapper which is an ancestor of the clipping table-box.)

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1232055 where this was (incorrectly) reported as a Firefox bug.

Firefox Nightly and Edge Insider Preview give "expected results" here.
Chrome 72 and Safari 12 give the buggy "actual results".

Note that this incompatibility caused a real-world webcompat bug, where a site is mistakenly depending on the Chrome/Safari behavior: https://github.com/webcompat/web-bugs/issues/21298
Comment 1 Brent Fulgham 2022-07-01 16:18:21 PDT
WebKit continues to match Chrome behavior here.
Comment 2 Radar WebKit Bug Importer 2022-07-01 16:18:38 PDT
<rdar://problem/96320197>