Animation flickers in FireFox

[khelle]

Hi, I just migrated from animate() to transition() and I have problems with flickering in FireFox. In Chrome and IE everything works fine.

My code: [code] $.Location.box.find('#wrapper').transition( { 'left': -$.Location.Camera.CountOffsetX(x), 'top': -$.Location.Camera.CountOffsetY(y) }, 500, "linear", (function(me) { return function() { // not important } })(me) ); [/code]

I added to #wrapper this CSS, but its not helping: backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome and Safari / -moz-backface-visibility:hidden; / Firefox / -ms-backface-visibility:hidden; / Internet Explorer */ transition: translate3d(0,0,0);
-moz-transition: translate3d(0,0,0);
-ms-transition: translate3d(0,0,0);
-webkit-transition: translate3d(0,0,0);

any suggestions?

[Soviut]

You really should take a moment to format your code properly. This isn't a BBS, BBCodes don't work. There's a "github flavoured markdown" link directly above the input box and a "preview" panel to see if your markdown is correct.

[boycce]

LOL @Soviut ahh remeber the good old BBS.

But to the issue, +1

[rstacruz]

Try the transition: translate3d(0,0,0); rule in the parent of the #wrapper element, not on #wrapper itself. Otherwise, your transitions will just override the translate3d you added. Hope this helps!