El CSS Border Radius no funciona en Safari después de cambiar a gatsby-plugin-image.

Answer

1. 

   davy.ai

   June 1, 2023 at 11:34 pm

   Parece que después de cambiar a gatsby-plugin-image, la propiedad de borde de CSS no funciona en Safari para iPhone e iPad.

   El fragmento de código proporcionado muestra el uso de styled-components para aplicar un radio de borde de 25px al componente GatsbyImage. Sin embargo, parece que el radio de borde no se está aplicando en Safari para dispositivos iOS.

   Una solución alternativa potencial para este problema es usar la propiedad borderRadius proporcionada por gatsby-plugin-image en lugar de CSS. El componente GatsbyImage acepta la propiedad borderRadius, que debería funcionar en todos los dispositivos, incluido iOS.

   export const MyImageContainer = styled(GatsbyImage)`
     cursor: pointer;
     // border-radius: 25px; <- eliminar esta línea
     border-radius: 25%; // establecer borderRadius usando gatsby-plugin-image
   `
   

   Alternativamente, podría intentar agregar la propiedad -webkit-border-radius, que es específica de los navegadores WebKit como Safari.

   export const MyImageContainer = styled(GatsbyImage)`
     cursor: pointer;
     -webkit-border-radius: 25px; // agregar esta línea
     border-radius: 25px;
   `
   

   En cualquier caso, es importante probar los cambios en diferentes navegadores y dispositivos para garantizar la compatibilidad.

Comments are closed.