1890855 - Site breakage related to overflow: hidden not working when div is set to display: table (overflowing abspos content leaks out)

Status: NEW

(Web Compatibility :: Knowledge Base, defect)

Comment 1

[Daniel Holbert [:dholbert]]

For the record: https://github.com/webcompat/web-bugs/issues/21298 was in fact an instance of this issue happening. I'm adding some details here since that webcompat issue is locked by lockbot.

The site in question there is no longer available, but archive.org has a snapshot here:
https://web.archive.org/web/20181101042834/https://www.dtelepathy.com/ux-metrics/#metrics

The issue is still reproducible using that archive.org URL and Nightly 2018-11-01 (from around when the issue was filed). The site actually included a Firefox-specific workaround for the exact issue (they tried to add display:none to the element in question when it's meant to be clipped/offscreen). But they had that workaround CSS guarded by the Firefox-specific @-moz-document url-prefix() syntax, and we temporarily disabled that syntax (and hence turned off the site's workaround in Nightlies for a while via layout.css.moz-document.url-prefix-hack.enabled. We eventually changed course and reenabled support for that CSS feature in https://hg.mozilla.org/mozilla-central/rev/3461e2c37550 which made the site start working again (by reenabling their workaround).

With their workaround disabled, though (e.g. in Nightly 2018-11-01), they were hitting this issue like so, roughly:

• they had a full-viewport slideshow, represented as a series of height:942px;display:table;overflow:hidden;position:relative container-element that wrapped each page of the slideshow. (where 942px is their dynamic measurement of my viewport height)
• On one particular slide, they wanted to have a fancy animation with an element that was meant to smoothly move on screen from the top of the slide.
• They implemented that effect by giving that element transform: translateY(-500px) until we scroll far enough to reach that slide.
• In Chrome, this meant that this content was clipped as-expected (by being off the top edge of the overflow:hidden table), but in Firefox, the content was not clipped and hence showed up as a weird unexpected overlapping thing on the previous slide.