1484358 - overflow: visible; shows scrollbar when different for both directions

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Yves Goergen [:ygoe]]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180807170231

Steps to reproduce:

Apply this CSS on a div element whose content is larger than the container:

overflow-y: hidden; overflow-x: visible;

Easy to reproduce with F12 inspector on the documentation page:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
Just add overflow-y there on the demo element.


Actual results:

The horizontal overflow is not visible but a scrollbar appears. Without the specification of overflow-y, the "visible" value works properly. So it's a problem when both are specified.


Expected results:

No scrolbars, no additional height of the container for the scrollbars (not observable on the documentation page but on my site), and the longer content fully visible like when overflow-x was specified alone.

Comment 1

[Yves Goergen [:ygoe]]

BTW, this fails in Chrome and Edge, too. So maybe it's a documentation issue and this combination isn't allowed which would be sad and likely be an oversight in the CSS specification.

Comment 2

[u554753]

Based off Comment 1, it's likely that this might be a documentation issue like you said, but changing to CSS Computation triage to double-check and make sure.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yes, this is expected. overflow-<foo>: visible; overflow-<bar>: something-else computes to 'visible auto'. See:

  https://drafts.csswg.org/css-overflow-3/#overflow-properties

> Computed Value: as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip .

Comment 4

[Yves Goergen [:ygoe]]

I'm not using "clip" but "hidden". I'd like to try "clip" instead of "hidden" but that gets ignored. It's also not present in the documentation. Is it too new? Is it unsupported in all browsers? What's the reason there?

Otherwise, what would be a solution to get the desired result? Does CSS need to be fixed to remove that quirks? I mean, I don't understand why this special case needs to exist. To me, I'd expect that visible and hidden can work in both directions independently. They work separate from each other, so why not combined? Or are there other workarounds availabe today?