Bug 250059

Summary: box-shadow does not paint correctly on inline elements
Product: WebKit Reporter: Kevin Yank <thatguy>
Component: Layout and RenderingAssignee: zalan <zalan>
Severity: Normal CC: bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
Bug Depends on: 250595    
Bug Blocks:    
Description Flags
Screen recording with the patch applied
Patch none

Description Kevin Yank 2023-01-03 18:46:23 PST
In Safari 16.2 on macOS 13.1, a display: inline element will fail to paint (or remove) a box-shadow correctly on hover/focus/active.

A work-around to force correct (re-)paints is to add a transparent outline of sufficient size to the same element(s).

Minimal demo: https://codepen.io/kevinyank/pen/rNrLEYa

<p>In Safari 16.2 on macOS 13.1, a <code>display: inline</code> element (such as <a href="https://example.com/">this link</a>) will fail to paint (or remove) a <code>box-shadow</code> correctly on hover/focus/active unless an <code>outline</code> (even a transparent one) covering the same area is applied to the element too.</p>

<p>To reproduce, hover or tab over/out of the link and observe the incomplete repaints (particularly for the areas outside of the surrounding block). To force a full, correct paint, try zooming in/out (⌘+/-) with the link focused. Then tab away from the link to see part of the painted outline fail to be removed in the repaint.</p>

a:is(:hover, :focus) {
  box-shadow: 0 0 0 5px red;
  outline: none;

  /* work-around: add a large enough transparent outline: */
  /*outline: 10px solid transparent;*/

/* Not necessary for the bug, but just to show that the painting is not cropping of overflow content. */
a {
  overflow: visible;
Comment 1 Radar WebKit Bug Importer 2023-01-04 14:15:14 PST
Comment 2 zalan 2023-01-04 14:18:53 PST
Thanks for the bug report! This is still reproducible on trunk WebKit.
Comment 3 zalan 2023-01-12 17:08:22 PST
Created attachment 464475 [details]
Comment 4 zalan 2023-01-12 17:10:08 PST
Created attachment 464476 [details]
Screen recording with the patch applied
Comment 5 zalan 2023-01-14 12:32:53 PST
Created attachment 464502 [details]
Comment 6 EWS 2023-01-14 16:33:04 PST
Committed 258923@main (003ff7e2ae82): <https://commits.webkit.org/258923@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 464502 [details].