El fondo del botón de opción se pone blanco en Windows Chrome cuando se usa -webkit-backface-visibility. ¿Alguna solución?

Question

Hay un error en Windows Chrome que hace que el fondo de un botón de opción se vuelva blanco cuando su elemento primario está fuera del flujo de documentos y se ha aplicado -webkit-backface-visibility.

Aquí está en acción: http://jsfiddle.net/misterkeg/uMajC/

estoy usando -webkit-backface-visiblity: hidden de moverse por el insecto parpadeo transición WebKit.

Este problema también ocurre si utilizo el arreglo -webkit-transform: translateZ(0) en su lugar, por lo que parece activarse cuando la aceleración de hardware está activa.

Sobrescribir la entrada de -webkit-backface-visibility a visible tampoco ayuda.

¿Existen soluciones provisionales para esto? He archivado un Chromium bug pero me gustaría saber si hay alguna forma de evitarlo mientras tanto.

Answer 1

He encontrado el mismo problema pero en un contexto diferente, por lo que podría ser que no es un problema con -webkit-backface-visiblity pero con varias combinaciones de cosas. En mi caso, el problema surge cuando la página con los botones de opción contiene un mapa como Google maps (uno propietario, no he encontrado qué exactamente en el mapa causa el problema) y se muestra dentro de un iframe. Si oculto el mapa con el inspector, los botones de radio se ven bien, o si veo la página directamente, no dentro del marco flotante.

La única solución que he encontrado está en esta página desde CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.

En resumen, esta es la solución (hay una demostración en vivo enlazado desde la página que he mencionado, 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"); 
} 

Como el lapso está dentro de la etiqueta, al hacer clic en él tendrá el mismo efecto que cl presionando el botón de radio, el botón de radio todavía funciona bien.

Estoy trabajando en un entorno de desarrollo por lo que no puedo publicar la url, pero con el código y los enlaces de arriba creo que es fácil de ver.

Si desea orientar solo en Chrome, puede intentar la solución aportada en este post: Can you target Google Chrome?

espero que ayude, que no me gusta de una manera tan complicada para hacer sólo un botón de radio simple, en mi caso, lo he usado en la única página que tiene ese problema en mi sitio y ha funcionado bien.

Answer 2

Aquí hay una solución alternativa que no usa imágenes (ni ediciones de radio css). Los resultados de la solución en un círculo blanco redondo alrededor del botón de radio (si su diseño puede tolerar eso) Prueba esto:

html:

<span class='radioWrap'><input type='radio'...></span> 

css:

.radioWrap{ 
    background-color: white; 
    padding: 4px 3px 1px 4px; 
    border-radius: 10px; 
} 

Eso es todo.

Answer 3

mejor solución w/sin tener que utilizar las imágenes:

Envolver el elemento de radio en un div, y establecer el desbordamiento del div que a escondidas, y la frontera de radio a 100px. Luego configure la entrada de radio para mostrar el bloque y sin margen. Esto funcionó para mí:

de marcado:

<div class="radio_contain"> 
    <input type="radio" id="r1" name="r1"> 
</div> 

CSS:

.radio_contain { 
    display: inline-block; 
    border-radius: 100px; 
    overflow: hidden; 
    padding: 0; 
} 
.radio_contain input[type="radio"] { 
    display: block; 
    margin: 0; 
}