| Summary: | Radio buttons are cut in a strange way (a piece is missing on the right) | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | collimarco91 | ||||||
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | akeerthi, cdumez, karlcow, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan | ||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||
| Version: | Safari 16 | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=80860 | ||||||||
| Attachments: |
|
||||||||
Created attachment 463143 [details]
rendering in Safari, firefox, chrome
Indeed.
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
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.
|
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.