| Summary: | CSS transition on SVG inside href fails when link already visited | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | marc-antoine.godde |
| Component: | SVG | Assignee: | Antti Koivisto <koivisto> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | joepeck, sabouhallawa, webkit-bug-importer, zimmermann |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 14 | ||
Pull request: https://github.com/WebKit/WebKit/pull/29579 Committed 279807@main (969e12628110): <https://commits.webkit.org/279807@main> Reviewed commits have been landed. Closing PR #29579 and removing active labels. *** Bug 159572 has been marked as a duplicate of this bug. *** |
Hello, Here is a demo HTML/CSS code: <!DOCTYPE html> <html> <head> <style> .hoverable-svg:hover { fill: red; } .hoverable-svg { transition: fill 0.5s ease-in-out; fill: blue; } </style> </head> <body> <a href="https://random-not-existing-url.com"> <svg class="hoverable-svg" height="24" width="24" viewBox="0 0 24 24"> <path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" /> </svg> </a> </body> </html> If you hover the SVG without clicking on it, the transition between red and blue is working. But after having clicked on it (meaning after having visited it), the transition does not work anymore.