Question

My website has several CSS animations and transitions, all of which render very, very slowly in certain browsers (thankfully, not most of them), and with certain older hardware. I’m trying to avoid UA sniffing; is there any way to detect browsers or hardware configurations using a JavaScript, or a JS library, and subsequently load non-animated versions for browsers which I know don’t have good support for those features?

Just to clear up any ambiguity, I’m not looking for something like Modernizr.

Answer 1

This is by no means sufficient to detect a slow system, but would minimize the impact on the users of such systems:

Use CSS transitions and trigger them with jQuery (by toggling classes as needed), offloading element animations to the rendering engine so that functional responsiveness of the page would not suffer at least.

Use the correct CSS properties. For instance, rather than animating top:10px;left:10px; properties, use a CSS transform transform: translateX(10px) translateY(10px) which will be more efficient.

Trigger hardware (GPU) acceleration by adding transform: translate3d(0,0,0); or a similar workaround to the target element.

If you’re absolutely attached to animations, or need to trigger fallback functionality (hide/show/reposition elements) without CSS for some reason, you could try a Modernizr workaround:

if(!Modernizr.csstransitions) {
  /*fallback logic*/
}