Bug 228143 - AX: CSS outline clipping when elements are resized in CSS
Summary: AX: CSS outline clipping when elements are resized in CSS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Unspecified macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-07-21 02:27 PDT by Dave House
Modified: 2021-07-23 04:35 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Dave House 2021-07-21 02:27:18 PDT 
When an element such as a link has an outline defined in CSS (for example as a :focus state) and that element has also been resized through bolding or increasing the font size the outline seems to clip based on the original font size. If you zoom the browser 2-3 times it triggers some kind of repaint and the outline appears.

The only way I have managed to get an outline to render properly in Safari is to add `overflow: auto` to the element which seems to force the outline to render correctly.

Simplified test case here:

https://codepen.io/iknowdavehouse/pen/wvdqdba
Comment 1 Radar WebKit Bug Importer 2021-07-21 02:27:29 PDT 
<rdar://problem/80887280>
Comment 2 Sam Sneddon [:gsnedders] 2021-07-23 04:35:52 PDT 
Some layout/paint invalidation bug?