display acceleration disabled after effects

The element has been given its own compositing layer.

The CSS property being transitioned is acceleratable.

Hardware-accelerated layer compositing is enabled in the browser.

Is there a way to see if hardware acceleration has been enabled through dev tools in any browser? I don't need to detect this with script, I just want to know for testing purposes.Ī CSS property transition on an element is hardware-accelerated if all these conditions are met: However, after adding that to my CSS I see no visual improvement. This is faster than jQuery but is still stuttery on iOS and android.īut I read here that you can force the transition to be accelerated using the GPU by specifying a 3d transform that essentially does nothing, like this: -webkit-transform: translate3d(0, 0, 0) This adds a class and the element transitions from one state to the next using a CSS transition.

Transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out

Display acceleration disabled after effects