Bug 245794

Summary: Column break is affected by outline
Product: WebKit Reporter: Ken <ken.sugiura>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screenshot of multi-column list with unwanted layout shift caused by outlines none

Description Ken 2022-09-28 12:22:38 PDT 
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
Comment 1 Karl Dubost 2022-09-28 18:54:28 PDT 
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
Comment 2 Radar WebKit Bug Importer 2022-09-28 18:54:39 PDT 
<rdar://problem/100538552>