48DESIGN

Hey guys, I just stumpled upon a problem that only occured in FireFox, giving me the very unspecific error message "NS_ERROR_FAILURE" when animating an SVG. In Chrome, it worked without a problem. After spending quite some time trying to find what's wrong, it turned out that there was an element that was hidden via display="none" for testing purposes but that was still being animated with GSAP. I created a simplistic test case, see the Codepen. In the uncompressed TweenMax.js, it's in line 3000: b = e.getBBox(); It's not a big issue now that I found out what was going on, but maybe this is something that GSAP could check and then just ignore the animation if the element is not visible anyway, to prevent others to run into this in the future.

Here's an update: Mozilla devs feel they are following the specs, so the other browsers are behaving wrong. I'm not taking on the hassle of either getting the spec changed or filing bug reports with several other vendors, but rather live with yet another browser inconsistency. Thanks to your fix, that won't be a problem, and you might consider including it in a future update.

That's awesome. You, Sir, are awesome. And GSAP is awesome. Did I forget anything? Thanks a lot, the fix will save us quite som time and nerves... Here's an updated codepen that includes the fix: http://codepen.io/anon/pen/LVXBxY Cheers! P.S: If anyone's interested, here's the bug report at Mozilla's Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1189042

Just a quick update to let you know that unifying the x and y attributes with the matix didn't work out. I suspect that the viewBox attributes on the <symbol>s may have something to do with this as well..

Thanks so much for taking the time for an evaluation! I will try merging the x/y and transform - if that works, maybe I can automate it with a script. I will also file a bug report with Mozilla, but I will await your final response on this matter first. Cheers!

Thank you all for the quick replies! Maybe the fact that it works in an older FF version is helpful for getting closer to a solution! Let me know if there's anything else I can provide or try out!

Hi everybody, I'm trying to animate an SVG (that I didn't create) for client project. It works well in Chrome and even Internet Explorer (9-11), however, I'm running into trouble with Firefox. The y positioning of the elements is completely incorrect, some parts move up instead of down and parts that should visually "stick" together end up shifted. http://codepen.io/anon/pen/zGMKPN Interestingly, I found out that if I use "yPercent:" instead of "y:" and adjust the values accordingly, the animation works as intended throughout all browsers. Take a look at this modified codepen: http://codepen.io/anon/pen/xGQEXr I don't feel comfortable using yPercent. On the one hand, it's not "semantically" correct in my view, because I actually don't need and don't want to rely on the elements' heights for just moving them around. And on the other hand, if I want to move two elements around that visually represent the back and front side of one single object, I have to find the correct percentage values for each of them, which doubles my work. (I should add that I will have to animate several similiar SVGs for the project.) I'm aware of the fact that the SVG could be cleaner (e.g. not using <use>, the various transforms and the viewBox attributes on the symbols...), but I want to avoid having to clean up and effectively rebuild every single SVG file. And apart from that, I would really like to know what causes these browser inconsistencies that GSAP isn't able to compensate and would be glad if anyone could come up with a way to fix it. Thanks in advance for any help Constantin