Bottom nav icons have weird artifacts (tiny spikes)

[fer0n]

If you look at the bottom navigation icons closely, you can see some tiny spikes which most likely aren't there on purpose:

[aeharding]

Phone model and OS version?

[fer0n]

Device: iPhone 12 Pro
OS: iOS 16.6
Version: 0.11.1

[aeharding]

I can replicate in https://ionic-react-conference-app.firebaseapp.com/about.

Therefore, I believe this is an Ionic or Ion Icons bug. Please make an issue with one of those projects and tag this issue so we can stay informed :)

[fer0n]

@aeharding ionic-team/ionicons#1176

[aeharding]

Thanks!

If you can confirm that workaround works, feel free to make a pr

[aeharding]

Reopening, I still get jagged icons

[fer0n]

I'll have another look tomorrow, for me it was definitely gone but maybe I was missing something. Sorry for the inconvenience

[fer0n]

What device were you testing it on @aeharding?

[aeharding]

I'm using an iPhone 13 mini. Should be using latest iOS :)

[fer0n]

I had another look, the fix works on the iOS Simulator and on macOS in Safari.
Simulator Screen Shot - iPhone 13 mini.

However, no matter what I do I can't get it to work on the actual iPhone. I guess we'll have to hope that the ionicon issue will be fixed or maybe a newer iOS Version will fix it. In the mean time, if you think it's worth having that line to fix it on desktop safari you could enable it again, but otherwise I think we're out of luck, sorry.

[fer0n]

Maybe there's another way to solve this, but it's probably not going to be as clean as the first approach. I'll see what solution I can come up with and then you can decide if it's worth merging

[fer0n]

@aeharding I opened a PR (#281) for the new fix, as I mentioned it's not as clean and quick as the first one, but the best solution I could come up with.

[aeharding]

@fer0n can you confirm if this is solved for you in latest iOS?

[fer0n]

@aeharding Yes, the issue is gone 🎉
Thanks 😊