New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-ui] consider requiring that descendants do not contribute to outline #2846

Open
heycam opened this Issue Jun 29, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@heycam
Contributor

heycam commented Jun 29, 2018

https://drafts.csswg.org/css-ui-4/#outline-props

Outlines are (intentionally) not required to be a particular shape, but there are some suggestions. One of those suggestions is that descendant boxes contribute to the outline. Firefox does this (although not for descendants whose containing block is an ancestor), but Chrome, Edge, and Safari all appear to ignore descendant boxes.

This is a Web compatibility problem for Firefox sometimes, particular when pages use descendants positioned off screen (e.g. with position: relative; left: -10000px) to provide text alternatives for elements whose background-image is important.

An uncomplicated test that renders differently in Firefox (the outline surrounds the overflowing content) from other browsers:

http://mcc.id.au/temp/pos-outline.html

<!DOCTYPE html>
<style>
div { background-color: yellow; width: 20px; height: 20px; outline: 1px solid blue; }
</style>
<div>abcdefghijklmnopqrstuvwxyz</div>

I think we should consider being a bit stricter about which boxes contribute to an outline.

@heycam heycam added the css-ui-4 label Jun 29, 2018

@heycam

This comment has been minimized.

Contributor

heycam commented Jun 29, 2018

Here's a case that is less interoperable, but probably not as important from a Web compatibility perspective:

http://mcc.id.au/temp/inline-outline.html

<!DOCTYPE html>
<style>
span { outline: 2px solid orange; }
span > div { outline: 2px dashed black; }
</style>
<div>here is some text <span>with <div>an<br> outlined</div> span</span> that wraps</div>

Edge and Chrome agree here and just render an orange outline around the two inline fragments of the span. Safari only renders an orange outline around the first fragment. Firefox renders orange outlines around both inline span fragments as well as the anonymous block that contains the child div.

@frivoal

This comment has been minimized.

Contributor

frivoal commented Jun 29, 2018

I'd be in favor of trying to slowly aim for more interop, but I know that @tantek has been strongly in favor of allowing a broad range of behavior, at least in the past.

@tantek

This comment has been minimized.

Contributor

tantek commented Jul 2, 2018

The examples given are definitely challenging to consider.

I would be in favor of documenting some “simpler” interesting and desirable examples in spec itself with sample browser renderings.

For example an inline flow element that is wrapped across multiple lines, both where the boxes are disjoint, and where the boxes are touching, or perhaps wrapped across 3+ lines, to illustrate an “outline that encloses all the element’s boxes” as a more ideal rendering than say separate boxes for each piece.

Perhaps related, the spec mentions non-rectangular (effectively) three times in the outline section, “Outlines may be non-rectangular” (twice) and “The parts of the outline are not required to be rectangular”. While clarifying/documenting some preferred outline renderings, perhaps we can simplify the definition and remove the apparent duplicate descriptions.

(Originally published at: http://tantek.com/2018/182/t3/)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment