Pregunta Borde de 1px (o menos? Subpixel?) En SVG en línea en FF25 e IE10, no en Chrome


Me encuentro con un problema extraño cuando uso un SVG en línea. Estoy creando un camino en una <svg> elemento y el uso top o bottom Atributos CSS con relative posicionamiento para superponer este SVG sobre un elemento anterior para obtener un efecto de "recorte" en la sección.

Esto funciona totalmente en Chrome, pero en IE10 y FF25, Obtengo este borde "transparente" a la derecha y arriba del SVG. Puse 'transparente' entre comillas porque, hasta donde sé, es transparente, ya que muestra el fondo verde brillante que está debajo. Aquí hay una captura de pantalla que indica exactamente dónde estoy viendo esto (la captura de pantalla es de FF25):

SVG Border Issue in Firefox 25

Originalmente recibí la sugerencia de separador de Codrops.

Página de prueba

En esta página de prueba, la sección con un encabezado de "Sección de problemas SVG"es la sección con el problema.

¿Hay alguna forma de aleviar este problema para que mi técnica funcione bien entre navegadores? ¿O hay una mejor manera de lograr el efecto que estoy buscando? ¡Gracias!


Actualización 1: A través de un poco más de prueba, he descubierto que a veces mientras se desplaza en Firefox, el "borde" fantasma superior desaparece y no regresa. Incluso después de volver a cargar la página. No estoy seguro de qué está causando que esto desaparezca y no es parte del problema, solo una anomalía.

Actualización 2: Realicé algunas pruebas adicionales al eliminar los elementos para ver qué puede desencadenar esto y, después de eliminar los comentarios, algunas secciones sobre la "Sección de problemas de SVG" y el pie de página, el borde se ha movido al separador inferior. Aquí está la página sin el pie de página: http://ignitepixels.com/sandbox/svg/sample.html

Actualización 3: Creé un violín en el que repliqué el problema. Esto debería facilitar la resolución de problemas: http://jsfiddle.net/fmpeyton/NuneR/

Como no puede guardar tamaños de panel específicos en jsfiddle, adjunté una captura de pantalla del tamaño aproximado en que pude reproducir este problema con Firefox 25: Fiddle in Firefox 25 Posiblemente relacionado con la Actualización 1, el problema muestra / desaparece en función del ancho de la ventana también.


8
2017-11-08 23:50


origen


Respuestas:


No estoy seguro si es un error de redondeo o un svg tema de pintura anti-aliasing, pero solo he encontrado lo siguiente para trabajar consistentemente tanto en Firefox como en IE10 en mis pruebas (ver ejemplo)

Cambie ambas rutas SVG a esta

Tenga en cuenta el extra .1 agregado en dos lugares

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

Cambiar el top/bottom compensaciones de esos elementos

Cambiar las compensaciones de -20px a -19.5px

Añadir esto a .separator

    height: 20px;
    overflow: hidden;

Lo que no estoy seguro es qué tan frágil puede ser esta solución.


5
2017-11-13 20:56



Otra solución es agregar las siguientes reglas a section.green.

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;

2
2017-11-09 03:39



Tuve un problema similar con un gráfico svg donde utilicé tween-maxjs en él. Solo en cromo obtuve un borde parpadeante. Probé las soluciones recomendadas desde arriba, pero no cambió nada.

Así que encontré este artículo: Evite el parpadeo en webkit-transition de webkit-transform

y la clave fue: -webkit-backface-visibility: oculto;

Espero que eso ayude a alguien a luchar con el mismo problema. Saludos :)


2
2017-12-18 09:35