border-radius + gradient + box-shadows que causan bordes irregulares

Cuando aplique el radio del borde y un degradado de fondo a <li> las esquinas redondeadas se ven irregulares y rugosas. Check it out on this jsfiddle border-radius + gradient + box-shadows que causan bordes irregulares

Estoy viendo esto en Chrome y FF. Si elimino el degradado O el radio del borde, el problema desaparece.

¿Alguna idea de por qué sucede esto y cómo podría solucionarlo?

ACTUALIZACIÓN: Estoy trabajando en una solución de jQuery que se basa en la idea de Josh F (véase su respuesta completa más abajo). Es una función jQuery simple que agrega una copia duplicada del elemento detrás de ella. Por el momento, los scripts establecen el posicionamiento del elemento seleccionado en relative. (Pude ver que era problemático en algunos casos). Mi código se encuentra en jsFiddle here.

Fuente

2012-04-18 emersonthis

La especificación actual define box-shadow que deben extraerse fuera de la border-box. Sin embargo, el fondo/borde pinta los elementos al fondo, sin tener en cuenta otros elementos (no pinta con objetos, solo encima). Dado que el elemento con el border-radius se dibuja antes que el box-shadow, dibuja la esquina con un borde semitransparente para hacer que la esquina se vea lisa (como debería). Lamentablemente, debido a la forma en que la especificación está redactada para box-shadow, se dibuja después de el elemento y, por lo tanto, se pinta en la parte superior de la página (después del elemento) con un borde semitransparente. Normalmente, esto estaría bien, pero dado que tanto el elemento como el box-shadow tienen un borde transparente en los mismos píxeles, causa un espacio pequeño y semitransparente.

Este es un error conocido, o al menos ha sido considerado un error por la comunidad de diseño web. Consulte Bugzilla Bug #474386 (specifically comment #6) para obtener la fuente de mi información.

Fuente

2012-04-18 14:07:41 0b10011

Genial. Bueno saber. ¿Conoces algún problema (además de volver a un fondo de archivo de imagen?)? – emersonthis

@Emerson, utilizando un fondo de archivo de imagen, * no * resolvería el fondo. Este es un problema con la forma en que se dibuja el fondo y no es específico de los degradados (consulte [jsFiddle example] (http://jsfiddle.net/wCtgh/1/)). Mi solución típica es utilizar un 'box-shadow' y' background que no está * demasiado * lejos del 'del fondo del padre. Mientras que el espacio transparente sigue siendo visible, no es tan notable. No es ideal de ninguna manera, pero funciona. Otra opción sería no usar 'border-radius' (ya que este es el principal culpable). – 0b10011

Huh. Creo que estoy siguiendo lo que dices, pero parece que el gradiente también es parte del problema. ¿No? Cuando miro tu jsFiddle (con fondo plano) en Chrome, el problema no está allí. – emersonthis

Una posible forma de evitar el error sería colocar un pseudo elemento detrás de la caja que es 1px más alto que la caja y del mismo color que la caja-sombra. Esto ocultaría el error al hacer que el borde previamente blanco sea el mismo o se acerque a la sombra de la caja.

Ver this jsFiddle para un ejemplo.

Fuente

2012-04-18 16:14:53

Muy inteligente. Estaba pensando en probar algo así, pero no se me había ocurrido usar un pseudo-elemento. – emersonthis

De esta manera no tiene que meterse con el elemento primario del elemento ni agregar ningún marcado adicional. –

Estoy jugando con esto, y he encontrado un inconveniente: estoy usando 'border-radius' en todo mi sitio, usando varias clases diferentes.Me estoy dando cuenta de que voy a tener que crear MUCHAS clases duplicadas para aplicar el pseudo-elemento donde sea que vaya porque no puedo pensar en una manera de escribir el CSS de una manera que no lo haga ponte realmente desordenado En otras palabras, me gustaría poder reflejar de alguna manera los estilos del parten para que la clase pueda ser reutilizada: '.rounded-esquinas {/ * border radius * /}' '.rounded-esquinas: después de {/ * reglas de radio de borde * /; ancho: [parent_width]; altura: [parent_height]; ...} ' – emersonthis

border-radius + gradient + box-shadows que causan bordes irregulares

Respuesta

Cuestiones relacionadas