Normalize.css: OSX radios are being clipped in chromium browsers

[josephfusco]

Chromium browsers clip radio buttons one pixel on the left and bottom if a parent has overflow:hidden. This is an open issue with chromium but over a year old. It was brought up in bootstrap but I thought it should be decided on within normalize since it isn't exclusive there.

---

Radios and checkbox inside container with overflow:hidden

---

This also can be seen when radios are naturally against the edge of page.

---

Demo
This would establish a consistency across all operating systems and browsers.

[akhyarrh]

Doesnt happen to me, maybe. Chrome 44.0.2403.61 beta on lubuntu 14.04. From your demo:

[cvrebert]

Per http://crbug.com/396726#c1 , only Mac OS X is affected by this.

[josephfusco]

@walutisme This is an OSX only issue. Windows and Linux are fine. :)

[jonathantneal]

I’ve recently started addressing issues here, so forgive me for the delay. I’d like to wait till there is a fix, since the fix involves very opinionated defaults on how radio buttons should align. @josephfusco, thoughts or new info?

[josephfusco]

@jonathantneal I have changed my stance on this and agree that it is too opinionated for inclusion in normalize. Since this is a known chromium bug (although the ticket is approaching 2 years old), developers can simply apply the 1px shift of the radio input by means of margin, padding, or positioning on the affected side of the element.

[cvrebert]

Filed a WebKit bug since this affects Safari too: https://bugs.webkit.org/show_bug.cgi?id=155577