Hi,
I was implementing a tween based on CSS3's background-size today. That would map to "backgroundSize" as defined in CSSPlugin.js.
However, the tween doesn't work in the latest Firefox. While it works perfectly in the latest Chrome.
I digged down until I found about this condition in _parsePosition function in CSSPlugin.js:
_parsePosition = function(v, o) {
if (v == null || v === "" || v === "auto") {
v = "0 0";
}
Debugging this, I found that 'v' was passed in as 'auto' in Chrome. But it was passed in as 'auto auto' instead in Firefox. Since 'v' was not changed to '0 0' this leads to parsing problem resulting in 'NaN' in o.ox. And thus the effect doesn't work.
My TweenMax code looks like something along these lines:
controller.addTween(
chart.offset().top,
TweenMax.fromTo($('.bub', chart),
.25,
{css:{opacity:0, 'letter-spacing':'30px', backgroundSize:'0% 0%'}, immediateRender:true, ease:Quad.easeInOut},
{css:{opacity:1, 'letter-spacing':'0px', backgroundSize:'100% 100%'}, ease:Quad.easeInOut}
),
0, -350
);
I patched CSSPlugin.js locally so that it now handles 'auto auto' case. The backgroundSize transition now works correctly on my machine.
if (v == null || v === "" || v === "auto" || v === 'auto auto') {
v = "0 0";
}
Hope this helps. Not sure of any proper channel to report issue for TweenMax?
Natthawut
