1521631 - Implement overflow:overlay (non-standard)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P2)

Description

[Thomas Wisniewski [:twisniewski]]

It seems that according to this Webkit bug, overflow:overlay was once a (non-standard) value that is now treated as an alias for overflow:auto. In Firefox, using the value just results in no scrollbars appearing, which has just surfaced as an interop issue on webcompat.com for RedBubble's site.

If it really is just an alias, I suspect it would be worth adopting it for compat's sake as part of the Compatibility standard.

Comment 1

[Karl Dubost💡 :karlcow]

And that seems frequent on GitHub at least

Comment 2

[Jonathan Watt [:jwatt]]

Attachment: Bug 1521631. Implement overflow:overlay as an alias of overflow:auto. r=emilio

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Quoting from Phabricator:

Hmm, so this looks more complicated than this. Blink also makes scrollbars not take layout space when overflow: overlay is specified:

https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/layout/layout_box.cc?l=977&rcl=c16c4e3c6a08c6c9cc4178415ac28889d78ffb1a

WebKit can get away with aliasing it to auto because mac always has overlay scrollbars. But we don't.

So this does not look so simple... Or am I missing something?

Comment 4

[Jonathan Watt [:jwatt]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)

WebKit can get away with aliasing it to auto because mac always has overlay scrollbars. But we don't.

That...is a very good point.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Ah, yes, now that I've tested it again it seems that Chrome is also actually overlaying the scrollbars. My apologies for not checking more thoroughly.

Comment 6

[Mike Taylor [:miketaylr]]

Just a note that the site this was reported against has fixed their site.

Comment 7

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 8

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 9

[Mike Taylor [:miketaylr]]

(Gonna bump this to a P3 because the Bing COVID stuff is relying on it, but it doesn't affect release because they're using @-moz-document url-prefix as a workaround)

Comment 10

[rohitmpaul]

I have multiple pages that use the same template, some pages are longer than the browser window's height, while other's aren't. The ones that are longer get pushed to the left by about 10px.
overflow: overlay solves this, but sadly this doesn't work in Firefox. MDN web doc's suggests not to use it https://developer.mozilla.org/en-US/docs/Web/CSS/overflow . Can this functionality be added to Firefox or can you guys suggest an alternate method to solve the above problem :(
https://stackoverflow.com/questions/8543664/overflow-overlay-doesnt-work-in-firefox
https://stackoverflow.com/questions/4297817/stop-scrollbar-from-pushing-content-left

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Do you have a test-case that you could attach to the bug? overflow-y: scroll should make sure stuff doesn't shift (by showing the scrollbar all of the time).

If you don't want that, depending on what you exactly want overflow-y: auto; overflow-x: hidden with width: 100vh on the child accomplishes effectively what overlay does. Or maybe something more on the lines of keeping overflow-y: scroll; but effectively hiding the scrollbars with scrollbar-color: transparent transparent may be better so that content doesn't go under the scrollbar? If you're doing some kind of scrollbar-on-hover effect that's much better.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

In any case per the discussion on the phab revision this is not just a simple matter of aliasing.

Comment 13

[rohitmpaul]

Thanks, Emilio. overflow-y: scroll and scrollbar-color: aqua transparent worked for me.

Comment 14

[amir123456789893]

It will be a useful feature for the web scrollbars I have described the use case here: https://github.com/w3c/csswg-drafts/issues/6262

Comment 15

[Joe Walker [:jwalker]]

Attachment: overflow-overlay-testcase.html

Super simple test case following a webcompat discussion.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1521631 - Implement overflow: overlay as an alias on auto, and enable on Nightly. r=#style,jwatt

See related webcompat issues and discussion in
https://github.com/w3c/csswg-drafts/issues/8063

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/51b8acb7ac3f
Implement overflow: overlay as an alias on auto, and enable on Nightly. r=boris

Comment 18

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/51b8acb7ac3f