Checkboxes and radio inputs are displaced in iOS Safari

[dcastil]

Describe the bug

Checkboxes and radio inputs are not aligned with label text in iOS Safari.

To Reproduce

1. Grab an iPhone or iPad
2. Go to https://primer.style/css/components/forms#checkboxes-and-radios
3. Check out checkbox and radio position

Expected behavior

The inputs should be aligned with their label text.

Screenshots

Checkbox in desktop Safari is fine

Checkbox in mobile Safari is too low and too close to the text

Radio in desktop Safari is fine

Radio in mobile Safari is too low and too close to the text

Desktop:

• OS: Mac OS Mojave 10.14.6
• Browser: Safari
• Version: 12.1.2

Smartphone:

• Device: iPhone 8
• OS: iOS 12.4
• Browser: Safari
• Version: 12.4

[simurai]

I can reproduce this in iOS Safari and Chrome. Curious about Android? 🤔

[shawnbot]

Thanks for reporting this, @dcastil!

[dcastil]

Sure! I don't have an android device unfortunately. But I think it affects all iOS as all browsers are forced to use Apple's webkit engine.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.