Why Aren't Browsers Smart Enough to Hardware Accelerate Without Tricks

Why aren't browsers smart enough to hardware accelerate without tricks?

It's not so much that browsers can't be or aren't smart enough to use hardware-acceleration. Instead, what you are referring to only really applies to WebKit, and especially to mobile versions of WebKit. Firefox and IE both hardware-accelerate everything, and they automatically split the page into "layers" that are composited on the GPU. That's why they usually blow past Chrome on rendering speed tests. WebKit, on the other hand, has never really been adapted to have more than simple layers acceleration.

Because Firefox and IE can take advantage of Direct2D rendering on Windows platforms (where every single drawing operation is hardware-accelerated), it was essentially a requirement that they be able to do hardware-accelerated compositing as well. If they had only accelerated the drawing operations and not the compositing, they would have lost most of the speed advantage from using Direct2D in the first place because it would have required copying between GPU and system memory, which is slow. On the other hand, all WebKit rendering backends that I'm aware of perform rendering completely in software, and incur the copy-to-GPU penalty when they composite (if GPU compositing is being used). So, it ends up being a tradeoff. If the layer you are compositing doesn't take much time to render on the CPU, it doesn't always make sense to perform the copy and composite on the GPU at all.

Due to this, and also to the extremely limited nature of mobile GPU's, none of the WebKit browsers have yet begun to do automatic hardware-acceleration except when it's absolutely required (e.g. when setting a 3D transform). If you wanted my opinion, I would also add that I think laziness on the part of WebKit developers and supporting companies is a bit of a factor here as well. Using the GPU is a major source of bugs, so it is easier for them to just not use it rather than fix the problems.

By the way, Firefox for Android can do GPU compositing all the time, although you might have to enable it in about:config; I don't know if it's on by default. For PCs, I would recommend using Firefox or IE for really fast rendering.

EDIT: I should also add that in the very latest versions of Android, Google has added hardware-acceleration to Skia, which handles nearly all 2D rendering on the OS. Not many devices in the wild have this yet, but it does mean that performance will improve for everything on Android in the near future. That said, I don't know whether their Skia implementation works as seamlessly with OpenGL as we may like. Compositing still might incur some extra copies until they deal with it.

Android Internet Browser Performance

You can change the default browser to another like Firefox or Chrome.

In newer versions of Android, Chrome is the default browser.

https://webmasters.stackexchange.com/a/47617

jQuery animation performance

There is some great information about browser performance at jankfree.org

Why does enabling hardware-acceleration in CSS3 slow down performance?

The reason animation was slower when you added the null transform hack (translateZ(0)) is that each null 3D transform creates a new layer. When there are too many of these layers, rendering performance suffers because the browser needs to send a lot of textures to the GPU.

The problem was noticed in 2013 on Apple's homepage, which abused the null transform hack. See http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

The OP also correctly noticed the explanation in their comment:

Moving few big objects is more performant than moving lots of small items when using 3D-acceleration because all the 3D-accelerated layers have to be transferred to the GPU and the way back. So even if the GPU does a good job, the transfer of many objects might be a problem so that using GPU acceleration might not be worth it.

Is there a Firefox equivalent to Chrome's translateZ(0); to force GPU accelerated CSS animation?

Firefox GPU-accelerates by default when it can. So there's nothing to "force" GPU acceleration: if it's possible, it's already done.

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

I found the "culprit".

I am using another codepen in my website's header :

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
  %span
    PURE CSS
  %br
  %span
    PARALLAX PIXEL STARS

Removing it makes the other animation smooth.

---

NONETHELESS:

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

Is Chrome less powerful ?

I filed a report to Chrome and hope they will answer here but there is no guarantee.

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

UPDATE 6:

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

Transitioning Away from Flash

Processing

I think your best answer is Processing given your familiarity with Java. Processing is used to create many demos and cutting edge graphics applications. Processing is built in Java but has a proprietary language that is very easy to use, and you can use straight Java as well. I don't know if it has a specific widget library, but certainly it is easy enough to build yourself. Check out some of the Processing exhibitions for a look at its power and flexibility.

The Simple Directmedia Layer

For true cross platform speed and hardware access you could look at something like the Simple DirectMedia Layer. The SDL is a cross platform library used for demos and games. It has 2d and 3d support as well as device access. It will run on Windows, Linux, Mac and countless other variations of hardware and software. It is written in C to make it easily cross platform, but you can code C++ or use the bindings for Python, Java, or Ruby if you are looking for something different. The SDL doesn't come with a built-in widget library, I don't believe, but there are many listed on their site under the SDL Interface category of libraries.

Qt

Another option is Qt which is a cross platform widget library recently purchased by Nokia. Nokia is an odd owner, but the library is licensed under LGPL and it offers everything you would need. I am not familiar with building graphically intense demos under Qt, but their documentation makes it sound feasible.

openFrameworks

openFrameworks is also used to for demos and cutting edge graphics and hardware applications. openFrameworks is written in C++ and is not so easy for less experienced developers. It does not have a specific widget library, and it is still in an alpha release state. I have not dug deeply into openFrameworks yet but it is much more advanced and tailored for advanced applications such as the ones tagged openFrameworks on Vimeo.

---

Related Topics