Scaling (zoom) SVG in Firefox

[mattsrinc]

Hi,

 

I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem:

 

 

Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger.

 

The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends.

 

Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help.

 

When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation).

 

Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.

See the Pen mJMRMX by mattsrinc (@mattsrinc) on CodePen

[mattsrinc]

No clue? Anybody? Is zooming few tens of SVG paths really so problematic in Firefox?

[Carl]

It appears FireFox does struggle a bit.

I didn't have time to investigate your svg or code in detail but it seems you are animating a bunch of things (circles, lines, text) while the cow is growing and I really don't know what those tweens do. Simplifying the animation appears to help quite a bit

 

codepen.io/anon/pen/xGLWRZ

[mattsrinc]

Thanks, Carl, encouraging as always. The problem is zooming in to double and triple scale:
 

that you can try by changing scale in your pen to 2.0 (or 3.0). I guess we have to resolve this to Firefox bug. Even if I remove all those texts, lines and circles blurring the speed is the same so animating the whole chart is slow in FF.

 

What about the idea of animating to viewbox (attribute of SVG tag) changed values etc?

[Carl]

Thanks for the video. Very strong evidence against FireFox. Hopefully they put some effort into fixing that. I can only imagine SVGs becoming more and more popular.

 

I haven't experimented with animating viewbox attributes so I'm not sure if that will work any better. 

[mattsrinc]

Thanks again. Luckily they said they will accept current script with cosmetic changes, not GreenSock related (we knew that, right? ).

 

I'll post another comment when Firefox (team) fixes that. On to new TweenLite and TimeLine script. With an owl!

[borbulon]

We've come across this issue as well recently. Can anybody point me to a Firefox bug specifically pertaining to this issue? If there isn't one, it would be good to create one so we can keep track of progress.