Not working in IE11

[halcarleton]

Just tried this out in IE11 and it is not working. It looks like the issue is that <x-object-fit> has it's parent container's styling applied to it.

Here's the code:

HTML

<div class="img_container img_container-portrait">
  <img class="img-cover" src="https://placeimg.com/640/480/any" alt="" />
</div>

CSS

body {box-sizing: border-box;}
*, *::before, *::after {position: relative;box-sizing: inherit;}

.img-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.img_container {
  width: 50%;
  max-width: 25rem;
  margin: 5rem auto;
  overflow: hidden;
  border: 2px solid #313131;
}

.img_container-portrait::before {
  content: '';
  display: block;
  padding-top: 130%;
}

JS

window.objectFit.polyfill({
  selector: '.img-cover',
  fittype: 'cover',
  disableCrossDomain: 'false'
});

Here is the resulting html:

<div class="img_container img_container-portrait">
  <x-object-fit class="x-object-fit-cover" style="margin: 5rem auto; border: 2px solid rgb(49, 49, 49); border-image: none; width: 50%; overflow: hidden; max-width: 25rem;">
  <img class="x-object-fit-taller" alt="" src="https://placeimg.com/640/480/any" data-x-object-relation="taller">
  </x-object-fit>
</div>

You can see that <x-object-fit> has the parent's styling in it's style attribute.

JSFiddle Example

[m00s]

+1
Is anyone working on this?

[MadLittleMods]

👍

[guerreit]

Would love this too!

[stephenjwatkins]

+1

[mmikkel]

+1 for IE10 and IE11.

[ZhelinCheng]

+1

[Flavour86]

+1

[DanielRuf]

I recommend archiving this project. Other solutions have better support and it is irritating when there are multiple polyfills (come on devs, GitHub is actually for collaboration ;-) ) and you have to decide which one to use.