Html – White box on radio buttons, only chrome, not all sites

cssgoogle-chromehtmlradio-button

EDIT: This question has been solved. @jerome.s comment helped me narrow my search, read the edits at the bottom of the question.

I found a problem than only affects Chrome (tested on Chrome, Firefox, Safari, IE9/8/7), but what really is driving me crazy is that it doesnt happen on all sites.

Giving a background to the container of a radio input causes a small white background box to appear on the input, however this background is not being added by any CSS, i created a fiddle using some code i found on twitter bootstrap page:

Fiddle depicting problem: http://jsfiddle.net/DMFca/1/

Alternative code to replicate problem:

<div style="background-color:lightblue">
  <input type="radio"/>
</div>

Result of the fiddle on my Chrome (25.0.1364.172 and 26.0.1410.43):
enter image description here

The problem is that the code does not behave the same way in bootstraps site (http://twitter.github.com/bootstrap/base-css.html#forms) after i add a background to any of their forms containing radio inputs. I have some other sites where this problem does not happen.

I have tried disabling all CSS affecting the radio and its closest containers in an attempt to discover the "fix", but it continues behaving differently (correctly) despite no CSS applied to it.

Once all CSS had been disabled i compared the computed styles of the input to my own problematic input and they are exactly the same, leading me to believe that it could be the doctype, some magic meta tag or some strange behavior on the container affecting the input, but no success there either.

This problem can be easily replicated, and i do know of some instances where it doesn't happen (so i assume there is a fix), however i cant find it. The same browser and (apparently) the same code have different results.

PS: I found a bug report for Chromium describing a very similar behavior, but relatively old and supposedly fixed

EDIT: Updated chrome to 26.0.1410.43, problem still exists

EDIT2: Viewing the fiddle outside of the iframe seems to fix it, but my initial issue still exists, will try to replicate the problem again and update the question

EDIT3: After seeing that the iframe was causing its own different bug i focused on trying to figure out what exactly was causing my original problem, i ended up disabling every css rule affecting the radio input and all its parents one by one until i found the culprit:

body {
  -webkit-backface-visibility: hidden
}

This "fix" to a bug (Webkit text aliasing gets weird during CSS3 animations) causes my bug.

Best Answer

It looks fine on chrome on mac... Perhaps you could try to set transparent on input elements?

input {background: transparent;}

http://jsfiddle.net/DMFca/2/