Oddly enough, removing the outer raf (on line 59) will remove the flicker in Safari but then break the animation in firefox. I'll see if I can figure that out, I must have a bug somewhere. We actually don't use the outer raf in our codebase and it works fine in both browsers.

what are you suggesting positioning absolutely?

I'm guessing the parent means using top, left, bottom and right offsets instead of transforms to support the likes of IE8.

The point of FLIP, RAIL and using transforms is to reliably achieve 60FPS by avoiding repaints whenever possible and giving the browser as little work to do as possible.

Adjusting width, absolute position offets and so on, can result in frames being dropped even in newer browsers on good hardware.

I personally treat animations as a luxury. If the user's browser doesn't support transforms (IE9 required for 2D, IE10/11 required for 3D) I just keep the content displayed in a clear and normal way.

Not sure I understand - changing absolute position also won't reflow parents/siblings, same as transform.

Thanks for pointing those out! Indeed we have to make extra corrections to make it work correctly on Safari, but the examples left those out to try to make them easier to follow.

What version of Firefox are you using? The first example I find to definitely be choppier on Firefox, but the last one looks pretty good.

49.0.1

Oops! Thanks for pointing that out. Updated!!

Were you looking at the siftscience.com marketing site or the Sift Science console?