Bug 245794 – Column break is affected by outline

• Component: CSS
• Status: NEW

[Ken]

Created attachment 462690 [details]
Screenshot of multi-column list with unwanted layout shift caused by outlines

This bug concerns CSS columns. Adding an outline to an element should not effect the layout, however, adding an outline to an element inside of a multi-column layout can cause a layout shift in Safari. This behavior is not desirable and does not occur in Chrome or Firefox.

Below is a link with an example. An outline is used as the :focus style for each link. Make sure you have tab navigation enabled in your preferences, and see what happens when each element receives keyboard focus.

https://codepen.io/ksugi/pen/zYjRWvG

[Karl Dubost]

another way to demonstrate the issue is to open the Web Inspector and add by hand an outline to the 3rd element and it shifts the layout.

Compare this in Safari, Firefox, Chrome
https://codepen.io/webcompat/pen/poVaOgy
it illustrates the issue.

The culprit here is:
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
https://w3c.github.io/csswg-drafts/css-ui-4/#outline-offset

if I deactivate this, the outline does not influence the layout.
a {outline-offset: 2px;}


It probably needs a web-platform-test for this case.
https://wpt.fyi/results/css/css-ui?label=master&label=experimental&aligned&view=subtest&q=outline

[Radar WebKit Bug Importer]

<rdar://problem/100538552>