feat(gatsby-plugin-image): object-fit polyfill for IE

[ascorbic]

Lazy-loads a polyfill for object-fit and object-position if the browser doesn't support them (so IE11).

[ch20513]

[wardpeet]

My main question would be, why not load it as part of gatsby-browser? It becomes part of the app bundle so we are sure that it's always loaded. We don't have to do any ref checks in the react components

[ascorbic]

As in load it unconditionally? Right now it's only loading it for IE. If I load it conditionally in gatsby-browser, it'll still need the check before it's called in case it hasn't finished loading.

[wardpeet]

You could put this in gatsby-browser.js. This will load object-fit only when it's necessary. It's a little bit easier to reason with than putting it inside component code.

export const onClientEntry = () => {
  // Object-fit/Object-position polyfill for gatsby-image (IE)
  const testImg = document.createElement(`img`)
  if (
    typeof testImg.style.objectFit === `undefined` ||
    typeof testImg.style.objectPosition === `undefined`
  ) {
    return import(
      /* webpackChunkName: "objectFitPolyfill" */ `objectFitPolyfill`
    ).then(mod => mod.default())
  }
}

[ascorbic]

Right, but I still need to apply it inside the component, because otherwise it won't catch any images that aren't in the DOM at the point it loads. This is why I'm calling it on individual components rather than globally.

[wardpeet]

You're correct! We need to run on a single ref, I thought we had to run it once.

[laurieontech]

Seems like it's fine to go forward with this version as both work and it's a matter of preference.