Bug 244025 - `:visited` link color does not propagate to SVG through `currentColor`
Summary: `:visited` link color does not propagate to SVG through `currentColor`
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar, LayerBasedSVGEngine
Depends on:
Blocks:
 
Reported: 2022-08-17 01:46 PDT by Masataka Yakura
Modified: 2024-06-21 05:04 PDT (History)
6 users (show)

See Also:


Attachments
test case - `:visited` + `fill="currentColor"` (921 bytes, text/html)
2022-08-17 01:46 PDT, Masataka Yakura
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Masataka Yakura 2022-08-17 01:46:50 PDT
Created attachment 461688 [details]
test case - `:visited` + `fill="currentColor"`

Steps to reproduce:

1. open attachment or go to https://myakura.github.io/test--visited-currentcolor-svg/
2. look at the test case


Expected result:

There is a green square.


Actual result:

There is a red square, in Safari (15.6) and Safari TP (151). It is green in Firefox and Chrome.


Additional comments:

People build customizable icon system by utilizing `fill="currentColor"` set on inline SVGs.

* https://css-tricks.com/cascading-svg-fill-color/
* https://mayashavin.com/articles/svg-icons-currentcolor
* https://gomakethings.com/currentcolor-and-svgs/

However, WebKit doesn't propagate colors set on `:visited` elements. So if such icons are placed inside links, they won't look as expected.

https://stackoverflow.com/questions/68116594/safari-not-showing-visited-color-for-svg-icon-that-is-inside-an-anchor-tag
Comment 1 Masataka Yakura 2022-08-17 01:51:53 PDT
It may be a part of https://bugs.webkit.org/show_bug.cgi?id=210005 .
Comment 2 Radar WebKit Bug Importer 2022-08-17 04:53:00 PDT
<rdar://problem/98776770>