Bug 246597 – Radio buttons are cut in a strange way (a piece is missing on the right)

• Status: NEW
• Component: Forms

The radio buttons are cut on the right if you apply some CSS styles.

Here's our entire CSS:

input[type=radio] {
  height: 1.5em;
  width: 1.5em;
  margin: 0 .5em 0 0;
  vertical-align: middle;
  accent-color: #337ab7;
}

The radio buttons are cut strangely on the right.

This can be related:
https://bugs.webkit.org/show_bug.cgi?id=155577

On Chrome and other browsers the CSS above works properly.

[Karl Dubost]

Created attachment 463143 [details]
rendering in Safari, firefox, chrome

Indeed.

[Karl Dubost]

Layout:
Safari  16.5px x 16.5px (on hover the devtools shows 17px)
Firefox 16px x 16px (on hover devtools shows 20px)
Chrome  20px x 20px (on hover devtools shows 20px)

And the test can be simplified to:


input[type=radio] {
  height: 1.5em;
  width: 1.5em;
}

The values with the cut are 1.5em and 1.6em
1.4em is working
1.7em is working

[Radar WebKit Bug Importer]

<rdar://problem/101480002>

[Karl Dubost]

Created attachment 463185 [details]
test case for radio button

4 sizes. 
1.5em, and 1.6em are cut.
1.4 and 1.7em are not.

[Ahmad Saleem]

@Karl - is it reproducing for you on WebKit ToT (289219@main) [Minibrowser]?

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #5)
> @Karl - is it reproducing for you on WebKit ToT (289219@main) [Minibrowser]?

I asked because I cannot reproduce it anymore.

[Karl Dubost]

Created attachment 473973 [details]
rendering in safari

the 1.5em button is cut on the right side.

[Ahmad Saleem]

Created attachment 473975 [details]
WebKit ToT (Reference) - macOS 15.2