RESOLVED CONFIGURATION CHANGED 155577
<input type="radio"> button overflows its bounds when it has margin-left:0; 
https://bugs.webkit.org/show_bug.cgi?id=155577
Summary <input type="radio"> button overflows its bounds when it has margin-left:0;
Chris Rebert
Reported 2016-03-16 21:05:08 PDT
Created attachment 274261 [details] Screenshot of CodePen testcase in Safari Original Bootstrap bug: https://github.com/twbs/bootstrap/issues/16756 Normalize.css bug: https://github.com/necolas/normalize.css/issues/462 Corresponding Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=396726 Possibly related to bug 131503? Safari: Version 9.0.3 (11601.4.4) Platform: OS X (this bug doesn't seem to occur on iOS) Summary: Radio buttons shouldn't require any left margin in order to be fully visible. The current behavior is unintuitive and makes it trickier to tweak the alignment of radio buttons reliably across different browsers. To reproduce: 1. Open http://codepen.io/mattdrose/pen/mKanB in OS X Safari. Actual result: The 1st radio button's left side is partially clipped off. Expected result: The 1st radio button's circle should be fully visible. Results in other browsers, for comparison: * Firefox on OS X: Displays correctly, with no clipping. * Microsoft Edge on Win10: Displays correctly, with no clipping. * Chrome on OS X: Same as Safari. See https://bugs.chromium.org/p/chromium/issues/detail?id=396726
Attachments
Screenshot of CodePen testcase in Safari (346.61 KB, image/png)
2016-03-16 21:05 PDT, Chris Rebert 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2022-08-30 02:17:03 PDT
I am not able to reproduce the clipping in radio button on Safari 15.6.1 and Safari Technology Preview 152 using CodePen from URL. If it is still an issue, please reopen if it is still an issue. Thanks!
Note You need to log in before you can comment on or make changes to this bug.