Created
July 17, 2019 12:30
-
-
Save adriandmitroca/15de2e2ed3a5816a1cd5eb800a68b83b to your computer and use it in GitHub Desktop.
Lottie, automatically fixing SVG scaling issue on Internet Explorer 11
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yes, also this task does not require jQuery at all, who uses that anyway? :P
Updated version: https://gist.github.com/modjke/3b8b3f11490ddf6d1bda18f8a9d44d1a