Csswg-drafts: [css-overflow] Selective overflow: hidden
Hi, I'd like to have some children not clipped by overflow: hidden, like focus outline, tooltips etc. Has this been discussed before? Thanks!
radogado
All 17 comments
Nope! Hasn't been discussed before. Afaict tooltips are not clipped by overflow: hidden, but it seems like focus outlines are. See testcase.
Afaict the CSS specs explicitly allow focus outlines to be painted over everything else in https://www.w3.org/TR/CSS2/zindex.html#outlines but it probably looks weird to draw an outline around something that's invisible. Do you have some examples of where this is a problem for you?
fantasai
on 11 Dec 2018
Cropped tooltip: https://radogado.github.io/natuive/demos/postbank/#credit (red circle with question mark)
Focus outline: no example, but anytime a focused element is at the edge of a container with overflow: hidden, the default focus outline is cropped. I had to move the outline inside the element, but that's not ideal.
I think at least the outline should always be visible, it makes no sense to be cropped by overflow: hidden.
Thanks!
radogado
on 11 Dec 2018
@radogado I think @fantasai was talking about native tooltips that show when a user rests their mouse while hovering elements with a title attribute?
jonjohnjohnson
on 11 Dec 2018
There is the trick of using position: absolute in the child and position: static in the parent, so that the containing block of the child is an ancestor of the parent. The problem is that usually I want to position or size the child with respect to the parent, which is not easy if the containing block is something else.
Loirooriol
on 12 Dec 2018
Yes, @fantasai was talking about native tooltips, which are rendered atop everything. That page is just showing some in-page element, which is affected by stacking/clipping contexts.
CSS is bound (for many reasons, mostly good) by the stacking/clipping context tree. "Escaping" that is difficult. The correct way to avoid being clipped by an ancestor is to not have an ancestor that clips you; in-page tooltips should be rendered as children of <body> and positioned with JS.
tabatkins
on 14 Dec 2018
@tabatkins great advice, I'll rewrite my tooltip as child of body. Clipping the focus outline, though, makes no sense and is an accessibility problem. Thanks!
radogado
on 17 Dec 2018
Another example would be a carousel where I need the controls to be outside and visible, while the overflowing content is hidden. Something like
overflow-absolute-children: visible;
would be very useful. Thanks.
radogado
on 17 Dec 2018
Not only that, but I for example for tooltips on buttons that need to have
overflow: hidden because they contain images (for example on crew profile
in contact page).
That will be very useful to have.
On Mon, 17 Dec 2018 at 11:02, Radoslav Sharapanov notifications@github.com
wrote:
Another example would be a carousel where I need the controls to be
outside and visible, while the content is hidden. Something likeoverflow-absolute-children: visible;
would be very useful. Thanks.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/w3c/csswg-drafts/issues/3417#issuecomment-447787667,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI0jbqwaQ1N8gAZzrV8DVaR2p-lV7bYsks5u52uwgaJpZM4ZLdF9
.
--
Jarda Fišer
mob.: +420 776 205 205, e-mail: fiser.[email protected]
Ernedar
on 17 Dec 2018
Another example would be a carousel where I need the controls to be outside and visible
@radogado Can you show this example of the layout you are talking about and explain why your controls would be structured inside what needs to have hidden/scrollable overflow, but have their box(es) rendered outside? Can't imagine any scenario where I wouldn't just have the controls structured outside in the first place, as I wouldn't want them moving within the carousels hidden overflow?
jonjohnjohnson
on 17 Dec 2018
Yes, the padded slider here: https://radogado.github.io/natuive/#slider
I had to add an additional wrapper to achieve that effect, which isn't ideal.
Thanks
radogado
on 18 Dec 2018
I submitted a use case which could fit into this: https://github.com/w3c/csswg-drafts/issues/4092
OliverJAsh
on 8 Jul 2019
Filed WebKit bug https://bugs.webkit.org/show_bug.cgi?id=205642
The focus ring (outline) shouldn't be hidden by overflow rules. Currently it is cropped by overflow: hidden. It looks ugly and broken and the efforts for workarounds are too great and unnecessary. It's a pain for people trying to make sites accessible. Please at least add a CSS option to always display the focus ring.
and @smfr redirected me back here.
Previous Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=462609
Focus ring should also escape masking by -webkit-mask. (Optionally)
Thanks
radogado
on 3 Jan 2020
The problem on Apple.com
radogado
on 28 Jan 2020
Given the significant impl complexity of allowing some things to draw outside of an overflowing box, versus the quite trivial complexity of an author ensuring there's a little bit of padding on the box, and taking into the account the relatively small pain from authors not doing that (one edge of an outline doesn't show), I believe the right answer is to do nothing here, and evangelize when necessary to get pages to do their layouts slightly better.
tabatkins
on 28 Jan 2020
@tabatkins How about more complicated use cases such as https://github.com/w3c/csswg-drafts/issues/4092?
OliverJAsh
on 28 Jan 2020
Same. There are relatively simple layout-based solutions to make those cases usable (such as wrapping the possibly-overflowing content in a wrapper with overflow:auto).
For separate reasons, we're also pursuing specifying the "top layer" positioning mode that things like dialog and fullscreen elements in HTML use, so authors can have individual elements totally escape all containing contexts and be displayed on top of everything else in the page; this requires slightly more complexity in the JS, but will allow for things like the "custom autocomplete list that doesn't get clipped or overlapped while it's displayed" use-case to be done well.
tabatkins
on 28 Jan 2020
The focus ring is a vital part of the global OS interaction and shouldn't be bound to page layout rules.
radogado
on 29 Jan 2020
Related issues
rachelnabors
·
92Comments
pes10k
·
66Comments
Lorp
·
208Comments
atanassov
·
64Comments
nicksherman
·
74Comments