Bug 283044 – Clipping of input type "radio" button when setting width/height

• Status: NEW
• Component: Forms

[Damien Seguin]

Created attachment 473216 [details]
Screenshot of the repro link showing clipped radio on the right

Browser: Safari 17.5 (19618.2.12.11.6)
OS: macOS 14.5

Overview:
Input type "radio" button are clipped when setting width/height.
No similar issue in Firefox or Chrome.

Repro link:
https://jsfiddle.net/dmnsgn/qg75kLyo/

It uses the following simple css:
input[type="radio"] {
  width: 1rem;
  height: 1rem;
}

Closest bug:
https://bugs.webkit.org/show_bug.cgi?id=155577

[Karl Dubost]

Created attachment 473223 [details]
rendering in safari, firefox, chrome

As tested in 
Safari Technology Preview  206           20621.1.3.21.1
Firefox Nightly            134.0a1       13424.11.7
Google Chrome Canary       133.0.6835.3  6835.3


This is happening only at certain sizes, where the text comes over the radio button. 

changing the width only and keeping the height to 1rem

* 0rem to 0.7rem the radio button doesn't change its size. (very small size the text is touching the button)
* 0.8rem to 0.9rem the radio button gets bigger without touching the text.
* 1rem the button gets cut vertically on the right side.
* any size above 
  - the text is getting away from the button, 
  - the button is not being clipped anymore
  - the button doesn't change size either

[Radar WebKit Bug Importer]

<rdar://problem/139856851>