3

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.

Community
  • 1
  • 1
cernunnos
  • 2,766
  • 1
  • 18
  • 18
  • looks fine in my chrome – Krish Apr 02 '13 at 10:47
  • Confirmed on Win7 Chrome 26.0.1410.43. Smaller sample with screenshot: http://jsfiddle.net/rw233/ – Qtax Apr 02 '13 at 10:56
  • Getting forbidden on that screenshot, and white box on the radio button on your fiddle. Will attempt to update chrome to see if the problem goes away. My issue is that this problem doesn't happen everywhere. – cernunnos Apr 02 '13 at 10:58
  • 3
    I've come across that issue, and it only happens when the radio buttons are in an iframe, I know that sounds weird. – wakooka Apr 02 '13 at 10:58
  • The original code where i identified this problem does not use iframes (ewwwww :P), its a simple stripped table with radio buttons. – cernunnos Apr 02 '13 at 10:59
  • @jerome.s, indeed viewing the document outside of frame fixes it (in my case): http://jsfiddle.net/rw233/show/ – Qtax Apr 02 '13 at 11:03
  • That is correct, the fiddle does get fixed when viewed outside the iframe, but my initial issue is still present, need to do some more homework and update the question. – cernunnos Apr 02 '13 at 11:05
  • @jerome.s if you want to put you comment on an answer ill accept it, as it got me closer to the answer – cernunnos Apr 02 '13 at 11:26
  • @cernunnos My answer didn't solve your problem, therefore it shouldn't be the _accepted_ answer. You should post the answer yourself instead of your "Edit 3", that will help people in the future. – wakooka Apr 03 '13 at 09:58

3 Answers3

0

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/

Mackelito
  • 4,213
  • 5
  • 39
  • 78
  • Tryed that too before i posted the question :) i'm going to close the question as ive found the answer, the problem was in a webkit only rule that was introduced to fix a bug but ended up causing another – cernunnos Apr 02 '13 at 14:11
0

Despite the fact that a bug seems to exist when displaying radio inputs inside iframes (as mentioned by jerome.s) my own problem was being caused by a fix to a webkit text aliasing bug:

body {
  -webkit-backface-visibility: hidden
}

This "bug fix" can be found here: Webkit text aliasing gets weird during CSS3 animations

Once this line was removed the problem was solved and the behaviour identified in the link above was not detected.

Community
  • 1
  • 1
cernunnos
  • 2,766
  • 1
  • 18
  • 18
0

I had that problem once. It was... painful!

My problem was an incorrect overflow: hidden applied in a parent.

Try to move your radio node using Chrome inspector level up per level up to the root, so when you see that its ok it will mean that the problem is located in the parent level you quit last time.

kurroman
  • 978
  • 10
  • 12