search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.07k stars 1.27k forks source link

Stroke Width gets increased when zooming in Safari Browser for React outline icons #710

Closed ahmed-abdelhamid closed 2 years ago

ahmed-abdelhamid commented 2 years ago

I have an issue that when I try to zoom in while working on Safari, the stroke width of React outline icons is scaled; that never happens with Chrome. Here is a screenshot to show my case:

This is the case when I zoom in.

Screen Shot 2022-06-23 at 3 43 10 PM

This is the case when there is no zooming.

Screen Shot 2022-06-23 at 3 43 33 PM
adamchainz commented 2 years ago

This doesn't happen on Firefox either. It seems like a Safari bug, could you look for it on their issue tracker?

ahmed-abdelhamid commented 2 years ago

This doesn't happen on Firefox either. It seems like a Safari bug, could you look for it on their issue tracker?

I am sorry but what is Safari issue tracker?

adamchainz commented 2 years ago

https://bugs.webkit.org/

adamchainz commented 2 years ago

I found e.g. this bug that several tests to do with zooming SVG's have been failing for a while: https://bugs.webkit.org/show_bug.cgi?id=158928

adamwathan commented 2 years ago

Yeah unfortunately this seems to be a Safari issue with rendering SVG strokes when zooming, and I can reproduce this with other stroke-based SVG icon libraries like Feather when zooming in Safari too:

image

Unfortunately don't think there's anything we can do here ourselves to help so going to close. Hope they resolve this in a future Safari update 🤞