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.