[Webkit-unassigned] [Bug 250059] New: box-shadow does not paint correctly on inline elements
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Tue Jan 3 18:46:23 PST 2023
https://bugs.webkit.org/show_bug.cgi?id=250059
Bug ID: 250059
Summary: box-shadow does not paint correctly on inline elements
Product: WebKit
Version: Safari 16
Hardware: Mac (Apple Silicon)
OS: macOS 13
Status: NEW
Severity: Normal
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: thatguy at kevinyank.com
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
HTML:
<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>
CSS:
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. */
p,
a {
overflow: visible;
}
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230104/b84760d1/attachment-0001.htm>
More information about the webkit-unassigned
mailing list