Conflict with flickity

[JoshMoreno]

I'm using flickity in my project and it breaks this polyfill for ie edge 14. Didn't test in anything else, but I'm sure it's the same story.

No console errors. Just breaks it silently.

Not sure if I should be posting here or over on flickity's issues. Sorry if I'm posting in the wrong place.

I was trying to read the code for this polyfill, but I don't see an unminified version here and can't wrap my head around the minified code. And for figuring out flickity...it's like 4,000 lines long so would rather just try and tweak the smaller script if possible.

Any ideas on how to possible get it working?

Thanks

[fregante]

This is the source: https://github.com/bfred-it/object-fit-images/blob/master/index.js

What's broken exactly? OFI doesn't run at all and therefore object-fit isn't polyfilled, or the images disappear?

It's hard to find the issue without seeing your page/site

[JoshMoreno]

OFI doesn't run at all from what I can see. It doesn't matter if it comes before or after flickity either.

…

On Fri, Nov 25, 2016 at 1:03 AM Federico Brigante ***@***.***> wrote: This is the source: https://github.com/bfred-it/object-fit-images/blob/master/index.js What's broken exactly? OFI doesn't run at all and therefore object-fit isn't polyfilled, or the images disappear? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#49 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVlGcEFDYYgA-NyFX-jVmOjmNk_2iX6Uks5rBqOqgaJpZM4K8L3j> .

[fregante]

If it doesn't seem to run at all, either flickity is moving the images around or you're not waiting for the document to be ready. What's your initialization code? objectFitImages();?

[JoshMoreno]

Thanks for your help @bfred-it , got it sorted out. Not a conflict. It seems that the DOM wasn't ready. I was using

document.addEventListener('DOMContentLoaded', function () {
    objectFitImages();
});

I added jQuery and used this instead and everything works as expected.

$(function(){
    objectFitImages();
});

I'll post back if I find a reliable way to get it working with vanilla JS. Unless you have any ideas?

Thanks again! Super helpful.

[JoshMoreno]

So it was because I was using async that I was missing the DOMContentLoaded event. Using this helper function from http://youmightnotneedjquery.com/

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// and usage like so
ready(function(){
    objectFitImages();
});

Everything seems to be working as it should. Thanks again. Sorry my fault.

[fregante]

Glad you got it sorted out, thanks for sharing your solution!