[gatsby-image] withIEPolyfill styles not applied to placeholder images

[flogy]

Description

I am using gatsby-image/withIEPolyfill together with placeholder images (traced SVG in my case). The reason I use the polyfill is because I want to apply object-fit: contain to them. In Google Chrome everything looks fine. However, when testing in Internet Explorer 11 the Traced SVG is not styled correctly. It seems that object-fit: contain is not applied at all.

After further investigation discovered that this is indeed the case. See the following references:

gatsby/packages/gatsby-image/src/withIEPolyfill/index.js

Line 16 in 9fb521a

ObjectFitImages(this.imageRef.current.imageRef.current)

gatsby/packages/gatsby-image/src/withIEPolyfill/index.js

Line 28 in 9fb521a

imgStyle={{

Steps to reproduce

1. Use the gatsby-image/withIEPolyfill on an image and apply objectFit="contain" to it.
2. Open it in IE 11 and pay attention to the misalignment between the traced SVG and the actual image.

Expected result

The special styles used to polyfill object-fit properties to IE 11 should not only be applied to the actual image but also to the placeholder image.

Actual result

The special styles used to polyfill object-fit properties to IE 11 are only applied to the actual image.

Environment

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.5.1 - C:\Program Files\Python35\python.EXE
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.20.12 => 2.20.12 
    gatsby-image: ^2.3.1 => 2.3.1 
    gatsby-mdx-tts: 0.0.6 => 0.0.6 
    gatsby-plugin-emotion: ^4.1.23 => 4.1.23 
    gatsby-plugin-manifest: ^2.3.2 => 2.3.2 
    gatsby-plugin-mdx: ^1.0.75 => 1.0.75 
    gatsby-plugin-offline: ^3.0.32 => 3.0.32 
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sharp: ^2.5.4 => 2.5.4 
    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27 
    gatsby-plugin-ts-config: ^0.2.1 => 0.2.1 
    gatsby-plugin-typescript: ^2.2.0 => 2.2.0 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-polly: 0.0.1 => 0.0.1 
    gatsby-transformer-sharp: ^2.4.4 => 2.4.4 

[flogy]

Will add a PR with a fix soon.