Fix auto-close knob showing range thumb on iOS Safari

[viniciussoares]

On iOS Safari, the native range input thumb appears as a white ball in the center of the auto-close knob component, overlaying the custom UI.

Fix

Hide the range input on iOS Safari using a @supports feature query that targets WebKit on iOS.

Before	After

[jzimdars]

I haven't been able to reproduce this. Is it only happening in a particular version of Mobile Safari? I'm on iOS 26.1.

I don't love that this uses a generic @supports query to target Safari instead of querying for this specific feature. Dumb question: did you try -webkit-appearance: none;. Sometimes that's still effective even when appearance: none should work.

[foucist]

It's also not mobile specific, I get this in desktop on Safari 17.6
.

[viniciussoares]

I haven't been able to reproduce this. Is it only happening in a particular version of Mobile Safari? I'm on iOS 26.1.

I don't love that this uses a generic @supports query to target Safari instead of querying for this specific feature. Dumb question: did you try -webkit-appearance: none;. Sometimes that's still effective even when appearance: none should work.

@jzimdars I tried another approach using opacity: 0 directly on .knob__slider and it works! In my case it happens on iOS 17.6.1.

It's also not mobile specific, I get this in desktop on Safari 17.6

@foucist Can you test with this new commit?

[jzimdars]

I don't have an older version of Safari to test with but I can confirm the opacity: 0 doesn't break the intended behavior in Firefox and Chrome.

[jorgemanrubia]

So this one is good to merge @jzimdars?

[jzimdars]

@jorgemanrubia I was hoping that @foucist would confirm it fixed the issue for him but even if it doesn't, it's harmless and ok to merge.

[foucist]

Sorry, I got stuck with dev env issues so I wasn't able to test it locally. Looks good to me on app.fizzy.do now.

[jzimdars]

No worries. Thanks for looking!