Fix: Resolve the visual glitch in the Switch component that causes un…

[Scorpio3310]

The input field has been modified from inline to hidden.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c50e270

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-ux	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 23, 2024 6:00pm

[techniq]

Thanks @Scorpio3310, but this will cause the input to no longer be focusable and thus toggle via the keyboard.

CleanShot.2024-02-23.at.07.00.33.mp4

Could share a video of the visual glitch you are seeing?

[Scorpio3310]

I'm posting the image of the visual glitch from your website. Using Arc. On Brave is the same as Arc but Safari doesn't have this problem.

[Scorpio3310]

Also sending the video of fixed bug.

switch.mp4

[techniq]

Thanks @Scorpio3310, I didn't realize it was browser specific (only affects Arc and Brave, which are both Chromium-based). Interest I didn't see any issues with Chrome or Edge (also tested Safari and Firefox)

[techniq]

Thanks @Scorpio3310. I tested on Arc, Brave, Chrome, Firefox, and Safari and I didn't see any regressions (other than the fixes for Arc/Brave). From a other testing with some of my co-workers, we think it's a regression with Chromium 122 (I'm still on Chrome 121). I didn't have the issue with Edge (also Chromium based) but just updated it, and saw the issue show up, and your fix resolves it.

In the future, anytime you submit a PR, it's nice to generate a changeset using pnpm changeset to help with releases (used to generate the changelog and determine the next version based on merged PRs).

Thanks for finding this, investigating, and submitting the PR.

[techniq]

I was this was still an issue on mobile Safari (15.0 and 17.4) but luckily adding a height: 0 worked without breaking chromium-based browsers (that I saw).

Before	After