CSS animation drops frame rates of webgl canvas

RESOLVED WONTFIX

Status

()

Core
Canvas: WebGL
RESOLVED WONTFIX
5 years ago
5 years ago

People

(Reporter: Memis, Unassigned)

Tracking

21 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

5 years ago
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.
(Reporter)

Updated

5 years ago

Comment 1

5 years ago
(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?

Updated

5 years ago
Flags: needinfo?(mr.deyil)
(Reporter)

Comment 2

5 years ago
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?
Flags: needinfo?(mr.deyil)

Comment 3

5 years ago
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.)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.