Safari mostrando borde de 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 normalmente, pero Safari muestra un contorno delgado donde la imagen debería ser transparente.

Espero que la captura de pantalla aclare el problema:

ingrese la descripción de la imagen aquí

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, por lo que todas las sugerencias e indicaciones son bienvenidas. ¡Gracias!

EDITAR:

  1. Sí, verifiqué si la imagen tiene una línea gris, pero no es así.
  2. Además, este problema solo apareció después de que actualicé Safari a 11.0.2.
  3. Y al modificar el ancho de img en las herramientas de desarrollo primero al ancho real (7000 px) y luego al 100%, la línea gris desaparece.
  4. Aquí hay un enlace al sitio web donde aparece el problema.
¿Puedes compartir la imagen en sí? Sospecho que el contorno gris es parte de la imagen, stackoverflow.com/questions/19549498/…
Proporcione la URL de la imagen real, no una captura de pantalla.
Gracias por su sugerencia. Sin embargo, la imagen no tiene línea gris. Además, este problema solo apareció después de actualizar Safari a 11.0.2. Y al modificar el ancho en las herramientas de desarrollo primero al ancho real (7000 px) y luego al 100%, la línea gris desaparece. (actualizó la pregunta en consecuencia)
Estoy en Safari 11.0.1 y no veo ninguna línea. Sin embargo, definitivamente es un error.

Respuestas (1)

Acabo de enfrentar el mismo problema y tropecé con esta pregunta.

Para mí, la imagen mostraba un borde delgado, medio oscuro y sombreado en el borde entre la parte no transparente y la parte transparente de la imagen. El problema solo era visible en Safari.

Comparación de la imagen renderizada con el borde delgado en safari y la imagen original con transparencia visualizada

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

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

Safari mostrando borde de PNG transparente
RespuestasAquíPolítica de privacidad1y, 0v