Animation SVG ne s'affiche pas correctement sur IE11

Bonjour à tous,

Je suis en train de bosser sur le site d'un client. Sur la page d'accueil, j'ai 3 animation SVG qui s'animent quand on scroll et qu'on arrive sur ces animations. Tout est nickel sur Chrome, Fox, Safari et IE sauf version 11.
Je cherche une solution pour remédier à ce bug.

Merci de vos réponses.

Le code html :

                    	<svg class="line-drawing" id="lightbulb" x="0px" y="0px" width="100%" height="100px" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="-59.54 245.47 77.02 111.8">
							<g>
								<path d="M-37.79,338.15c0,0,25.936,0,33.51,0"/>
								<path d="M-37.79,323.82c0,0,25.665,0,33.51,0"/>
								<path d="M-28.31,352.27c0,0,0.75,0,14.551,0"/>
								<path d="M-27.57,319.391V295.15h13.07 c0,0,0,16.317,0,24.241"/>
								<path d="M-28.65,316.621 c-14.84-3.451-25.89-16.75-25.89-32.641c0-18.51,15-33.51,33.51-33.51s33.51,15,33.51,33.51c0,15.8-10.93,29.04-25.64,32.581"/>
							</g>
						</svg>

le code CSS :

.line-drawing path, .line-drawing line, .line-drawing polyline { fill: none; }
#lightbulb path { stroke: #6aaf88; }

et le JavaScript :

(function() {

	'use strict';

	var docElem = window.document.documentElement;

	window.requestAnimFrame = function(){
		return (
			window.requestAnimationFrame       || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     || 
			function(/* function */ callback){
				window.setTimeout(callback, 1000 / 60);
			}
		);
	}();

	window.cancelAnimFrame = function(){
		return (
			window.cancelAnimationFrame       || 
			window.webkitCancelAnimationFrame || 
			window.mozCancelAnimationFrame    || 
			window.oCancelAnimationFrame      || 
			window.msCancelAnimationFrame     || 
			function(id){
				window.clearTimeout(id);
			}
		);
	}();

	function SVGEl( el ) {
		this.el = el;
		this.image = this.el.previousElementSibling;
		this.current_frame = 0;
		this.total_frames = 60;
		this.path = new Array();
		this.length = new Array();
		this.handle = 0;
		this.init();
	}

	SVGEl.prototype.init = function() {
		var self = this;
		[].slice.call( this.el.querySelectorAll( 'path' ) ).forEach( function( path, i ) {
			self.path[i] = path;
			var l = self.path[i].getTotalLength();
			self.length[i] = l;
			self.path[i].style.strokeDasharray = l + ' ' + l; 
			self.path[i].style.strokeDashoffset = l;
		} );
	};

	SVGEl.prototype.render = function() {
		if( this.rendered ) return;
		this.rendered = true;
		this.draw();
	};

	SVGEl.prototype.draw = function() {
		var self = this,
			progress = this.current_frame/this.total_frames;
		if (progress > 1) {
			window.cancelAnimFrame(this.handle);
			this.showImage();
		} else {
			this.current_frame++;
			for(var j=0, len = this.path.length; j<len;j++){
				this.path[j].style.strokeDashoffset = Math.floor(this.length[j] * (1 - progress));
			}
			this.handle = window.requestAnimFrame(function() { self.draw(); });
		}
	};

	SVGEl.prototype.showImage = function() {
		classie.add( this.image, 'show' );
		classie.add( this.el, 'hide' );
	};

	function getViewportH() {
		var client = docElem['clientHeight'],
			inner = window['innerHeight'];
		 
		if( client < inner )
			return inner;
		else
			return client;
	}
 
	function scrollY() {
		return window.pageYOffset || docElem.scrollTop;
	}
 
	//  http://stackoverflow.com/a/5598797/989439
 
	function getOffset( el ) {
		var offsetTop = 0, offsetLeft = 0;
		do {
			if ( !isNaN( el.offsetTop ) ) {
				offsetTop += el.offsetTop;
			}
			if ( !isNaN( el.offsetLeft ) ) {
				offsetLeft += el.offsetLeft;
			}
		} while( el = el.offsetParent )
 
		return {
			top : offsetTop,
			left : offsetLeft
		};
	}
 
	function inViewport( el, h ) {
		var elH = el.offsetHeight,
			scrolled = scrollY(),
			viewed = scrolled + getViewportH(),
			elTop = getOffset(el).top,
			elBottom = elTop + elH,
			// if 0, the element is considered in the viewport as soon as it enters.
			// if 1, the element is considered in the viewport only when it's fully inside
			// value in percentage (1 >= h >= 0)
			h = h || 0;
 
		return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
	}
	
	function init() {
		var svgs = Array.prototype.slice.call( document.querySelectorAll( '#main svg' ) ),
			svgArr = new Array(),
			didScroll = false,
			resizeTimeout;

		// the svgs already shown...
		svgs.forEach( function( el, i ) {
			var svg = new SVGEl( el );
			svgArr[i] = svg;
			setTimeout(function( el ) {
				return function() {
					if( inViewport( el.parentNode ) ) {
						svg.render();
					}
				};
			}( el ), 250 ); 
		} );

		var scrollHandler = function() {
				if( !didScroll ) {
					didScroll = true;
					setTimeout( function() { scrollPage(); }, 60 );
				}
			},
			scrollPage = function() {
				svgs.forEach( function( el, i ) {
					if( inViewport( el.parentNode, 0.5 ) ) {
						svgArr[i].render();
					}
				});
				didScroll = false;
			},
			resizeHandler = function() {
				function delayed() {
					scrollPage();
					resizeTimeout = null;
				}
				if ( resizeTimeout ) {
					clearTimeout( resizeTimeout );
				}
				resizeTimeout = setTimeout( delayed, 200 );
			};

		window.addEventListener( 'scroll', scrollHandler, false );
		window.addEventListener( 'resize', resizeHandler, false );
	}

	init();

})();

le lien : http://cluster007.ovh.net/~omdconsu/[/i][/i][/i][/i][/i][/i][/i]