So I was testing something out with transparencies for an effect I was going to use in another game, when I discovered this. Having one transparent square over the screen results in a barely noticeable performance hit, still being plenty playable, but if you put TWO transparent squares, the framerate drops like crazy.
db.tt/61FvHuSV
Here's what I'm talking about. I couldn't reproduce it with a barebones project, so I'm guessing it only affects bigger games -- though mine isn't even that big right now! The two transparent objects, one white and one black, are on the "Fade" layer at the top. You can "disable" them by setting the opacity to 0.
You'll notice that with both disabled, the game runs at a smooth 60-63 FPS (as indicated by the little text thingy). With one enabled, it drops to 50-60, but it doesn't disrupt the game much at all. With both enabled... it SAYS it's going about 40 FPS, but it feels more like 15-20. That's not good enough to play with, not even close.
So, I guess my real question here is, is this just a limitation of the current speed of HTML5? Will this eventually go away, or should I just avoid using this for effects till the end of time?