883531 - CSS animation drops frame rates of webgl canvas

Status: RESOLVED WONTFIX

(Core :: Graphics: CanvasWebGL, defect)

Description

[Memis]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Steps to reproduce:

I use css3 moz-animation with webgl canvas.


Actual results:

In my web site http://eubooce.zeropointdevelopers.com i use the css3 moz-animation feature. Now i tried to implement webgl canvas with three.js. The problem is that css animation drops canvas performance. This happens with Firefox only. If i remove the animation canvas fps work smoothly.


Expected results:

Fps of canvas shouldn't drop in conjunction with css animation.

Comment 1

[Nick Cameron [:nrc]]

(In reply to Memis from comment #0)
> User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4)
> AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
> 
> Steps to reproduce:
> 
> I use css3 moz-animation with webgl canvas.
> 
> 
> Actual results:
> 
> In my web site http://eubooce.zeropointdevelopers.com i use the css3
> moz-animation feature. Now i tried to implement webgl canvas with three.js.
> The problem is that css animation drops canvas performance. This happens
> with Firefox only. If i remove the animation canvas fps work smoothly.
> 
> 
> Expected results:
> 
> Fps of canvas shouldn't drop in conjunction with css animation.

Are you using a css animation on the actual webgl canvas itself? Or is the animation on some other element?

Comment 2

[Memis]

They are 2 different elements. I am not using animation on canvas. Hope that helps.

(In reply to Nick Cameron [:nrc] from comment #1)
> (In reply to Memis from comment #0)
> > User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4)
> > AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
> > 
> > Steps to reproduce:
> > 
> > I use css3 moz-animation with webgl canvas.
> > 
> > 
> > Actual results:
> > 
> > In my web site http://eubooce.zeropointdevelopers.com i use the css3
> > moz-animation feature. Now i tried to implement webgl canvas with three.js.
> > The problem is that css animation drops canvas performance. This happens
> > with Firefox only. If i remove the animation canvas fps work smoothly.
> > 
> > 
> > Expected results:
> > 
> > Fps of canvas shouldn't drop in conjunction with css animation.
> 
> Are you using a css animation on the actual webgl canvas itself? Or is the
> animation on some other element?

Comment 3

[Nick Cameron [:nrc]]

So, I would kind of expect this to happen at the moment - everything is happening on the main thread so adding the overhead of the css animation is going to slow things down and degrade the canvas frame rate. The good news is that the work we are doing on speeding up WebGL canvases and doing animations on the compositor thread should help with this too.

(I'm closing this as WONTFIX, but really we are working hard on fixing this in other places.)