Bug 246597 - Radio buttons are cut in a strange way (a piece is missing on the right)
Summary: Radio buttons are cut in a strange way (a piece is missing on the right)
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2022-10-16 13:55 PDT by collimarco91
Modified: 2022-10-23 19:27 PDT (History)
7 users (show)

See Also:

Attachments
rendering in Safari, firefox, chrome (23.83 KB, image/png)
2022-10-21 02:08 PDT, Karl Dubost 		no flags Details
test case for radio button (679 bytes, text/html)
2022-10-23 19:27 PDT, Karl Dubost 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description collimarco91 2022-10-16 13:55:19 PDT 
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.
Comment 1 Karl Dubost 2022-10-21 02:08:45 PDT 
Created attachment 463143 [details]
rendering in Safari, firefox, chrome

Indeed.
Comment 2 Karl Dubost 2022-10-21 02:17:34 PDT 
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
Comment 3 Radar WebKit Bug Importer 2022-10-23 13:56:17 PDT 
<rdar://problem/101480002>
Comment 4 Karl Dubost 2022-10-23 19:27:58 PDT 
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.