Gatsby-Image-Plugin not displaying properly on iOS devices

Question

I'm having an issue where my Gatsby site is not displaying images correctly on iOS devices. (This issue may also extend to macOS devices, but that needs further testing).

I am using <StaticImage> from gatsby-plugin-image and I'm am adding styles to it like so:

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;

NOTE: this issue also persists with <GatsbyImage> for CMS content

Expected result: the image appears with rounded corners

Actual result: the image appears with square corners, but only on iOS devices.

I created a test repository to showcase the issue.

To reproduce:

1. clone repository
2. install node modules
3. start development server ( npm run start )
4. access the development server from an iOS device

It appears that the image is being positioned over the gatsby image container on iOS devices instead of inside of it like it is supposed to. I don't know how to fix this issue so that styles can be applied to images consistently across all major browsers. I'm not even sure if this is a bug with gatsby-plugin-image or if it is a discrepancy in the way apple renders web content in iOS.

Answer 1

I figured out a solution that seems to fix the problem. <StaticImage> has an attribute called imgStyle that lets you apply styles directly to the image and not just the wrapper component.

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;

Answer 2

Thanks for the post, I had a similar issue. and the way I fixed it (using CSS) is that I defined the z-index of the gatsby-image-wrapper element, This way the img element inside it won't get placed on top of the wrapper (Safari and iOS devices). hiding the curved borders.

In CSS:

// Use your own className selector if applicable

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