aeharding
Fix jagged ionicons in safari/webkit browsers via wrapper component (#215)
This addresses #215
Sadly the easy solution didn't fix it. This basically just adds a stroke: unset style to IonIcons that otherwise show the weird artefact. I couldn't find a way to do this with css only, since IonIcon uses a shadow dom and doesn't expose any shadow parts that would let me access the svg element that needs the style. So I'm wrapping the component and add the style manually to the icon before setting it.
Some icons (usually outlined ones) are not visible if used with this wrapper component, so it has to be done only for the icons that need it. I've gone through the entire app multiple times, but it's probably best if this gets tested one more time to see if everything is still displayed correctly and none of the fragments remain (if it gets merged).
Wow, this is an impressive (albeit unfortunate) fix!
I want to see if Ionic is willing to fix this in Ionic directly, because it would be a lot less hacky there. So I'm going to wait for a reply before merging this.
Thank you again for looking into this.
No worries, I was happy to do it :) And I agree, I'd much rather not have it there at all if it can be avoided. It's just a workaround after all.
@aeharding What's the current status for this? Should I keep it up to date and ready to merge or do you think it's best to not merge it? It doesn't look like the actual issue will be resolved any time soon, sadly.
I think let's keep this on hold. I suppose we could close it for now. I really appreciate your effort on this though.
@fer0n I'm going to close this as its become quite stale. My apologies - I know this took time to implement - but I think it would be best if we wait for this to be fixed in either Safari or ionic icons.