3 votos

Safari muestra el borde del PNG transparente

Un sitio web en el que trabajo tiene una imagen png parcialmente transparente que cubre partes del sitio web. La imagen se redimensiona al 100% del ancho de la ventana del navegador. En todos los demás navegadores, las partes transparentes se comportan de forma normal, pero en Safari aparece un fino contorno cuando la imagen debería ser transparente.

Espero que la captura de pantalla aclare el problema:

enter image description here

Ahora me pregunto si esto es un error - o una característica? Y, por supuesto, me gustaría deshacerme de esa línea en zigzag, así que cualquier sugerencia e indicación será bienvenida. Gracias.

EDITAR:

  1. Sí, he comprobado si la imagen tiene una línea gris, pero no la tiene.
  2. Este problema también apareció después de actualizar Safari a la versión 11.0.2.
  3. Y al modificar el ancho de la img en dev tools primero al ancho real (7000px) y luego de nuevo al 100% la línea gris desaparece.
  4. Aquí hay una enlace a la página web donde aparece el problema.

1voto

Jason Chiang Puntos 11

Acabo de enfrentarme al mismo problema y me he topado con esta pregunta.

En mi caso, la imagen mostraba un borde fino, medianamente oscuro y con sombras en el borde entre la parte no transparente y la transparente de la imagen. El problema sólo era visible en Safari.

Comparison of the rendered image with the thin border in safari and the original image with transparency visualized

Para mí, la solución fue simplemente añadir transform: translateZ(0px) a la imagen. Esto cambia la representación de la imagen de manera que se evita el borde.


Sin embargo, es posible que desee restringir esta corrección a Safari, ya que hace que la imagen se represente pixelada en Chrome.

AppleAyuda.com

AppleAyuda es una comunidad de usuarios de los productos de Apple en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X