anselmh / object-fit

Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.
MIT License
996 stars 92 forks source link

Initialise polyfill repeatedly #27

Open querkmachine opened 9 years ago

querkmachine commented 9 years ago

Less of an issue, more of a support request.

I'm currently trying to implement the polyfill on a website that uses infinite-scroll and I need some method of re-running the polyfill every time new content is loaded in. The first initialisation works great, but does not affect the newly loaded content.

I've tried calling objectFit.polyfill() repeatedly, however it returns the error Can't execute code from a freed script, which is apparently related to the use of iframes within the polyfill.

If there's some way of being able to run the polyfill several times without encountering this issue?

Thanks!

anselmh commented 9 years ago

Hey, thanks for reporting. Indeed this seems to be a bug as the polyfill should react to newly loaded images through the MutationObserver. I’ll try to have a look as soon as possible. Do you by any chance have a demo somewhere? If you want to keep this private, you can also send me an email. :)

querkmachine commented 9 years ago

I've uploaded a slightly stripped down version of what I'm working with here: http://greysadventures.com/objectfitexample/ I've tried to keep it fairly complete in case there's some aspect of my implementation or some sort of library conflict that's at fault.

I've had the issue on all versions of IE and older Firefox. Both of them also freeze up for a substantial amount of time whilst applying the polyfill. If there's a reason for that too then it'd be great to know how to speed it up some.

anselmh commented 9 years ago

Hey, what does preload JavaScript do? Because I’m seeing an error "can't execute code from a freed script" which mostly occurs in IE when you have a script dependency loaded too early OR (but I doubt this is true for your example) when you use foreign frames in the page.

anselmh commented 9 years ago

In other words: Can you try to figure out if this works as expected when you load everything in order and don’t alter JS loading behavior? Trying to track the issue down now.

querkmachine commented 9 years ago

The preload JS is just Modernizr, to my memory. (It's called "preload" as I bundle my scripts with Gulp, and that's the catch-all term I use for all has-to-be-in-the-head stuff.)

Regarding "foreign frames", could this apply to YouTube embeds? These are injected into the DOM when they're needed, but don't exist otherwise.

anselmh commented 9 years ago

Oh, that YouTube embeds indeed could be the issue. Would you be keen to test if it works (or at least doesn’t output the message in IE’s console) then?

querkmachine commented 9 years ago

I've quickly stripped out the code responsible for the embeds (on the page linked above), however the error is still occurring.

nedbaldessin commented 9 years ago

I was having this issue on IE 9-10-11. I side-stepped the issue by disabling the DOM watching all together. Dirty, but it works.

window.objectFit.listen = function(){};
window.objectFit.polyfill({
    selector: 'img[data-object-fit-contain]',
    fittype: 'contain',
    disableCrossDomain: 'true'
});

// …later, after injecting new fragment in DOM:
window.objectFit.process({
    selector: '.Lightbox img[data-object-fit-contain]',
    replacedElements: document.querySelectorAll('.Lightbox img[data-object-fit-contain]'),
    fittype: 'contain',
    disableCrossDomain: 'true'
});

Hope this helps.