使用-webkit-backface-visibility时,单选按钮背景在Windows Chrome中为白色。任何解决方法? [英] Radio button background goes white in Windows Chrome when using -webkit-backface-visibility. Any workarounds?
问题描述
Windows Chrome中的一个错误,使得单选按钮的背景变为白色,当其父对象都离开文档流并应用了 -webkit-backface-visibility
时。
There's a bug in Windows Chrome that makes a radio button's background turn white when its parent is both out of the document flow and has -webkit-backface-visibility
applied.
这里是行动:
http:// jsfiddle。 net / misterkeg / uMajC /
我使用 -webkit-backface-visiblity:hidden
如果我使用 -webkit-transform:translateZ(0)$
This problem also occurs if I use the -webkit-transform: translateZ(0)
fix instead, so it seems to kick in whenever hardware acceleration is active.
覆盖输入的 -webkit-backface-visibility
Overriding the input's -webkit-backface-visibility
to visible
doesn't help either.
有没有任何已知的解决方法?我提交了 Chromium错误,但想知道是否有任何方法
Are there any known workarounds to this? I've filed a Chromium bug but would like to know if there are any ways around it in the meantime.
推荐答案
我发现同样的问题,但在不同的上下文,所以可能是不是一个问题 - webkit-backface-visiblity但是有几种东西的组合。在我的情况下,问题出现,当页面与单选按钮包含谷歌地图像地图(一个特殊的,我没有找到什么地图导致问题),并显示在iframe内。
如果我使用检查器隐藏地图单选按钮看起来确定,或者如果我直接查看页面,而不是在iframe内。
I have found the same problem but in different context, so might be it's not a problem with -webkit-backface-visiblity but with several combinations of things. In my case the problem arises when the page with the radio buttons contains a google maps like map (a propietary one, I haven't found what exactly in the map causes the problem) and is displayed inside an iframe. If I hide the map with the inspector the radio buttons look ok, or if I view the page directly, not inside the iframe.
唯一的解决方法已找到的是CSS ninja中的此网页: http://www.thecssninja.com/css/custom -inputs-using-css 。
The only workaround I've found is in this page from CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.
总而言之,这是解决方案(有一个现场演示链接从我提到的页面, http://www.thecssninja.com/demo/css_custom-forms/ ):
In summary, this is the solution (there is a live demo linked from the page I've mentioned, http://www.thecssninja.com/demo/css_custom-forms/):
HTML
<label for="input1" class="radio_image">
<input type="radio" name="input" id="input1" />
<span>Option 1</span>
</label>
CSS
/*we hide the real radio button*/
.radio_image input[type=radio] {
position:absolute;opacity:0;
}
/*we assign the span a background image
which is a capture of the actual radio button*/
.radio_image input[type=radio] + span {
background-image: url("radio-button.gif");
background-position: left top;
background-repeat: no-repeat;
padding-left: 1.6em;
}
/*if radio is checked we change the background
image to one with a checked radio button (it can be
done with a sprite type background too): */
.radio_image input[type=radio]:checked + span {
background-image: url("radio-button-checked.gif");
}
由于span位于标签内,因此点击它会产生相同的效果因为点击单选按钮本身,所以单选按钮仍然可以工作。
As the span is inside the label, clicking on it will have the same effect as clicking on the radio button itself, so the radio button still works ok.
我在一个开发环境工作,所以我不能张贴你的url,但与
I am working in a developement enviroment so I can´t post you the url, but with the code and the links above I think it's easy to see.
如果你只想定位Chrome,你可以尝试这篇文章中提供的解决方案:
您可以定位Google Chrome吗? (是的,你可以)
If you want to target just Chrome, you can try the solution provided in this post: Can you target Google Chrome? (Yes, you can)
我希望它有所帮助,我不喜欢这样一个复杂的方式来渲染一个简单的单选按钮,在我的case我使用它在唯一的网页有这个问题,我的网站,它工作正常。
I hope it helps, I don't like such a complicated way to render just a simple radio button, in my case I've used it in the only page having that problem in my site and it has worked fine.
这篇关于使用-webkit-backface-visibility时,单选按钮背景在Windows Chrome中为白色。任何解决方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!