[csswg-drafts] [css-ui] consider requiring that descendants do not contribute to outline

heycam has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui] consider requiring that descendants do not contribute to outline ==
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

```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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2846 using your GitHub account

Received on Friday, 29 June 2018 04:45:48 UTC