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
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
<rdar://problem/100538552>