fix(gatsby-image): apply IE polyfill styles to placeholder images too (…

…#22863) * apply IE polyfill styles to placeholder images too * fixed formatting
gatsbyjs · Apr 7, 2020 · 80c453e · 80c453e
1 parent c16eaa2
commit 80c453e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -262,14 +262,12 @@ const noscriptImg = props => {
 // Earlier versions of gatsby-image during the 2.x cycle did not wrap
 // the `Img` component in a `picture` element. This maintains compatibility
 // until a breaking change can be introduced in the next major release
-const Placeholder = ({
-  src,
-  imageVariants,
-  generateSources,
-  spreadProps,
-  ariaHidden,
-}) => {
-  const baseImage = <Img src={src} {...spreadProps} ariaHidden={ariaHidden} />
+const Placeholder = React.forwardRef((props, ref) => {
+  const { src, imageVariants, generateSources, spreadProps, ariaHidden } = props
+
+  const baseImage = (
+    <Img ref={ref} src={src} {...spreadProps} ariaHidden={ariaHidden} />
+  )
 
   return imageVariants.length > 1 ? (
     <picture>
@@ -279,7 +277,7 @@ const Placeholder = ({
   ) : (
     baseImage
   )
-}
+})
 
 const Img = React.forwardRef((props, ref) => {
   const {
@@ -357,6 +355,7 @@ class Image extends React.Component {
     }
 
     this.imageRef = React.createRef()
+    this.placeholderRef = props.placeholderRef || React.createRef()
     this.handleImageLoaded = this.handleImageLoaded.bind(this)
     this.handleRef = this.handleRef.bind(this)
   }
@@ -517,6 +516,7 @@ class Image extends React.Component {
           {image.base64 && (
             <Placeholder
               ariaHidden
+              ref={this.placeholderRef}
               src={image.base64}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -528,6 +528,7 @@ class Image extends React.Component {
           {image.tracedSVG && (
             <Placeholder
               ariaHidden
+              ref={this.placeholderRef}
               src={image.tracedSVG}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -618,6 +619,7 @@ class Image extends React.Component {
           {image.base64 && (
             <Placeholder
               ariaHidden
+              ref={this.placeholderRef}
               src={image.base64}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}
@@ -629,6 +631,7 @@ class Image extends React.Component {
           {image.tracedSVG && (
             <Placeholder
               ariaHidden
+              ref={this.placeholderRef}
               src={image.tracedSVG}
               spreadProps={placeholderImageProps}
               imageVariants={imageVariants}

diff --git a/packages/gatsby-image/src/withIEPolyfill/index.js b/packages/gatsby-image/src/withIEPolyfill/index.js
@@ -4,6 +4,7 @@ import Image from "../index"
 
 class ImageWithIEPolyfill extends Component {
   imageRef = this.props.innerRef || createRef()
+  placeholderRef = createRef()
 
   // Load object-fit/position polyfill if required (e.g. in IE)
   componentDidMount() {
@@ -12,24 +13,34 @@ class ImageWithIEPolyfill extends Component {
       typeof testImg.style.objectFit === `undefined` ||
       typeof testImg.style.objectPosition === `undefined`
     ) {
-      import(`object-fit-images`).then(({ default: ObjectFitImages }) =>
+      import(`object-fit-images`).then(({ default: ObjectFitImages }) => {
         ObjectFitImages(this.imageRef.current.imageRef.current)
-      )
+        ObjectFitImages(this.placeholderRef.current)
+      })
     }
   }
 
   render() {
     const { objectFit, objectPosition, ...props } = this.props
 
+    const polyfillStyle = {
+      objectFit: objectFit,
+      objectPosition: objectPosition,
+      fontFamily: `"object-fit: ${objectFit}; object-position: ${objectPosition}"`,
+    }
+
     return (
       <Image
         ref={this.imageRef}
+        placeholderRef={this.placeholderRef}
         {...props}
         imgStyle={{
           ...props.imgStyle,
-          objectFit: objectFit,
-          objectPosition: objectPosition,
-          fontFamily: `"object-fit: ${objectFit}; object-position: ${objectPosition}"`,
+          ...polyfillStyle,
+        }}
+        placeholderStyle={{
+          ...props.placeholderStyle,
+          ...polyfillStyle,
         }}
       />
     )