You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The outlines spec isn't clear when it comes to pseudo elements. This means that behaviour differs greatly between browsers.
Safari: Outline doesn't affect pseudo elements
Firefox: Outline will expand to include pseudo elements
Chrome: Outline will only include pseudo elements when: 1) the block is relative 2) the outline-style is auto
I especially find Chrome's behaviour odd, and thus opened an issue. Triaging is difficult, however, since the spec is so loose on expected behaviour—you can't detect what is and isn't a bug.
I know this isn't the only issue of it's kind (outlines affect on descendant's also varies is also inconsistent). I personally believe that narrowing down outlines affect on pseudo elements and descendants would help browsers, developers, and end users alike.
The text was updated successfully, but these errors were encountered:
I don't think tree-abiding pseudo-elements should be treated in any special way. In your example you use position: absolute, some browsers render the outline ignoring out-of-flow descendants and some render it bigger. The exact behavior is undefined, but should be the same whether you have a pseudo-element or a normal descendant.
https://drafts.csswg.org/css-ui-4/#outline-props
The outlines spec isn't clear when it comes to pseudo elements. This means that behaviour differs greatly between browsers.
Safari: Outline doesn't affect pseudo elements
Firefox: Outline will expand to include pseudo elements
Chrome: Outline will only include pseudo elements when: 1) the block is relative 2) the outline-style is
auto
Codepen example: https://codepen.io/mattdrose/pen/OreqYg
I especially find Chrome's behaviour odd, and thus opened an issue. Triaging is difficult, however, since the spec is so loose on expected behaviour—you can't detect what is and isn't a bug.
I know this isn't the only issue of it's kind (outlines affect on descendant's also varies is also inconsistent). I personally believe that narrowing down outlines affect on pseudo elements and descendants would help browsers, developers, and end users alike.
The text was updated successfully, but these errors were encountered: