Search code examples
cssiosgatsby

Gatsby-Image-Plugin not displaying properly on iOS devices

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

enter image description here

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

enter image description here

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.

Solution

  • 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;