Skip to content

Instantly share code, notes, and snippets.

@adriandmitroca
Created July 17, 2019 12:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adriandmitroca/15de2e2ed3a5816a1cd5eb800a68b83b to your computer and use it in GitHub Desktop.
Save adriandmitroca/15de2e2ed3a5816a1cd5eb800a68b83b to your computer and use it in GitHub Desktop.
Lottie, automatically fixing SVG scaling issue on Internet Explorer 11
const lottieIeFixer = (el, perspective = 'width') => {
if (!window.navigator.userAgent.includes('Windows') && !window.navigator.userAgent.includes('rv:11.0')) {
return;
}
const $el = $(el);
const width = $el.width();
const height = $el.height();
const $svg = $el.find('svg');
if (perspective === 'width') {
const ratio = width / $svg.attr('width');
$svg.width(width);
$svg.height($svg.attr('height') * ratio);
} else if (perspective === 'height') {
const ratio = height / $svg.attr('height');
$svg.height(height);
$svg.width($svg.attr('width') * ratio);
}
}
// Usage
const el = document.querySelector('.lottie-animation');
const animation = lottie.loadAnimation({
container: el,
renderer: 'svg',
autoplay: true,
loop: true,
path: $(el).data('source'),
});
animation.addEventListener('DOMLoaded', () => {
lottieIeFixer(el);
});
@modjke
Copy link

modjke commented Aug 16, 2019

IE 11 is very much in love with ES6 you wrote
Fixed version here https://gist.github.com/modjke/3b8b3f11490ddf6d1bda18f8a9d44d1a

@adriandmitroca
Copy link
Author

I always transpile my JavaScript through Babel so ES6 isn't really an issue.

@modjke
Copy link

modjke commented Aug 16, 2019

Yes, also this task does not require jQuery at all, who uses that anyway? :P
Updated version: https://gist.github.com/modjke/3b8b3f11490ddf6d1bda18f8a9d44d1a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment