Bug 285420

Summary: Outline not rendered correctly for inline SVG
Product: WebKit Reporter: net
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
URL: https://jsfiddle.net/h2opt0L5/
Attachments:
Description Flags
Test case none

net
Reported 2025-01-06 04:28:19 PST
I tried to add an outline to inline SVG illustrations with the following code: ``` <html> <head> <style> body { display: flex; flex-direction: column; align-items: center; & > * { width: 75vw; max-width: 400px; } } figure { display: block; height: auto; max-width: 50%; margin: 10px auto 10px auto; &:active { max-width: 150%; margin: 10px -50px 10px -50px; } & svg { display: block; height: auto; width: 50%; max-width: 50%; margin: 0 auto 0 auto; &:hover { outline: 2px black outset; outline-offset: 2px; } &:active { outline: none; } } } </style> <title> </title> </head> <body> <figure> <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red"></rect> <circle cx="150" cy="100" r="80" fill="green"></circle> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white"> SVG </text></svg> </figure> </body> </html> ``` The outline does not appear on hovering, but only after clicking the SVG, and then remains visible even when the mouse pointer is moved away. Both Firefox und Chrome render the outline correctly.
Attachments
Test case (1.13 KB, text/html)
2025-05-15 18:39 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-01-13 04:29:13 PST
<rdar://problem/142807293>
Simon Fraser (smfr)
Comment 2 2025-05-15 18:39:11 PDT
Created attachment 475257 [details] Test case
Note You need to log in before you can comment on or make changes to this bug.