css - Gatsby-Image-Plugin no se muestra correctamente en dispositivos iOS

Tengo un problema en el que mi sitio Gatsby no muestra imágenes correctamente en dispositivos iOS. (Este problema también puede extenderse a los dispositivos macOS, pero es necesario realizar más pruebas).

Estoy usando <StaticImage> de gatsby-plugin-image y le estoy agregando estilos así:

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    style={{ borderRadius: '100%' }}
  />
);

export default IndexPage;

NOTA: este problema también persiste con <GatsbyImage> para contenido CMS

Resultado esperado: la imagen aparece con las esquinas redondeadas

Resultado real: la imagen aparece con las esquinas cuadradas, pero solo en dispositivos iOS.

Creé un repositorio de prueba para mostrar el problema.

Para reproducir:

repositorio de clones instalar módulos de nodo iniciar el servidor de desarrollo (npm run start) acceder al servidor de desarrollo desde un dispositivo iOS

Parece que la imagen está siendo poubicado sobre el contenedor de imágenes de Gatsby en dispositivos iOS en lugar de dentro de él como se supone que debe hacerlo. No sé cómo solucionar este problema para que los estilos se puedan aplicar a las imágenes de manera consistente en todos los navegadores principales. Ni siquiera estoy seguro de si se trata de un error con gatsby-plugin-image o si se trata de una discrepancia en la forma en que Apple procesa el contenido web en iOS.

------------------------------------

Descubrí una solución que parece solucionar el problema. <Imagen estática> tiene un atributo llamado imgStyle que le permite aplicar estilos directamente a la imagen y no solo al componente contenedor.

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    imgStyle={{ borderRadius: '100%' }}
  />
);

export default IndexPage;

------------------------------------

¡Gracias por la publicación! Tuve un problema similar y la forma en que lo solucioné (usando CSS) es que definí el índice z del elemento gatsby-image-wrapper. De esta manera, el elemento img que contiene no se colocará encima del contenedor (dispositivos Safari y iOS), ocultando los bordes curvos.

En CSS:

// Use your own className selector if applicable

.gatsby-image-wrapper {
   position: relative;
   z-index: 0; 
}

Compartir mejorar esta respuesta Seguirrespondido

19 de julio de 2021 a las 13:00

Adrián1111

Adrián1111

31

1

1 insignia de bronce