IE renders the svg object in background-image property about object-fit-images HOT 10 CLOSED

Thanks!

Regarding the selector: I mentioned you can pass the element since you might already have it available in a variable in the React component, without having to re-query the dom. But it works either way :)

from object-fit-images.

Are you using any other scripts like lazyload, React or similar code that changes the original <img> tag? Perhaps any innerHTML? How does the <img> tag appear in the original HTML?

from object-fit-images.

I found my issue. I was using es6 import's but also loaded the library trough a script tag…

Thanks for the great polyfill 👍

from object-fit-images.

I'm encountering the exact same issue in IE11 in my React app. Here's what's being rendered:

<img class="ImageCardParallax--image--1RQt2 Parallax--full-width--3lsBj Parallax--full-height--XTQSz" style="background-position: center; background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-size: contain; background-origin: content-box;" alt="fill-murray-1" src="http://www.fillmurray.com/300/300" data-ofi-src="http://www.fillmurray.com/300/300"></img>

My CSS looks like this:

.ImageCardParallax--image--1RQt2 {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.Parallax--full-width--3lsBj {
    width: 100%;
}

.Parallax--full-height--XTQSz {
    height: 100%;
}

And I'm initializing it in my component (which is a pure functional component) like so:

objectFitImages('img.ImageCardParallax--image--1RQt2');

In the original HTML (or rather, JSX), the img looks like this:

<img src="http://www.fillmurray.com/300/300" alt="fill-murray-1" className="ImageCardParallax--image--1RQt2 Parallax--full-width--3lsBj Parallax--full-height--XTQSz" />

Any ideas whats happening @bfred-it ?

from object-fit-images.

I think you should put the objectFitImages(el) call in the componentWillMount. Just pass the element, not a selector.

from object-fit-images.

@bfred-it I just converted my pure component to a React.Component class and moved the call into componentDidMount, passing it an element instead. I'm still seeing the same behavior.

Also, don't the docs specify that you can pass in a selector rather than an element?

EDIT: I misread your comment initially. I have now tried a few things:

1. Moved objectFitImages('img.ImageCardParallax--image--1RQt'); into componentDidMount. Effect: same as before.

2. Moved const imgs = document.querySelectorAll('img.ImageCardParallax--image--1RQt2'); objectFitImages(imgs);
   into componentDidMount. Effect: same as before.

3. Did same as (1) but in componentWillMount. Effect: now no styles are being applied (which makes sense, since the component hasn't been rendered yet at this point)

4. Did same as (2) but in componentWillMount. Effect: same as (3)

(I'm also on version ^3.2.3 btw)

from object-fit-images.

@bfred-it Never mind...this turned out to be an issue with our deployment/build system, your polyfill works great. Thanks for bearing with me!

from object-fit-images.

Ah that’s good! What was the issue and where do you put the objectFitImages call? The solution might help others

from object-fit-images.

Basically it ended up being just a series of debugging mishaps related to developing in internal NPM packages, bugs with npm update, and testing all of this in IE11 in Browserstack -- the details of which are not important :)

To summarize though: initially, we had forgotten to include the CSS rule font-family: 'object-fit: contain;' in our CSS. After we added that, the polyfill worked as expected. We included the objectFitImages call immediately before the return value in our pure functional React component, and passed it the selector (see my earlier comment)

Hope this helps! Thanks again

from object-fit-images.

Ah, good call! Thanks :)

from object-fit-images.