I have a Raspberry Pi 3 with Chromium installed. I am trying to load my web application which has simple fadeIn and fadeOut animation but it's lagging on screen.
Any ideas on how to better support CSS3 animation on Raspberry Pi 3?
You should try and use a better browser such as the one built by the raspberry Pi team you can install it by using the commands:
sudo apt-get update sudo apt-get dist-upgrade sudo apt-get install epiphany-browser
Then launch it by clicking the menu in the bottom left in the gui and then under browsers you should notice epiphany.
Note: on more recent versions of raspbien epiphany should already be installed as it is the new default browser.
You may read more about the epiphany browser here .
I am recommending you this browser because it was built by the raspberry Pi team, but also because it contains gpu based hardware acceleration. Furthermore unlike chronium this browser was designed for arm and the Pi, but in general some choppiness is expected because the Pi struggles with real time activities, and your fade in fade out code which may run fine on your laptop requires the Pi to redraw the entire screen over again with a tint which requires each pixel to be recalculated with an opacity which is just that html elements colour partially mixed in with the element behind its colour. To create what looks like a fading to the user, which is also why fade wasn't a part of the original CSS specification because of the amount of real time proceeding power required. Additionally unlike other CSS effects such as borders, a fade in or out will not be pre computed. Finally, even with the hardware accelerated browser I would still keep my expectations for the Pi low as it should never be compared to something that cost 10s of times more than it.
As of April 2018, Raspberry Pi 3 has experimental support for OpenGL X Servers. After enabling it in
raspi-config and upping the allocated GPU memory, I found pages to be significantly more responsive.
You'll find the GPU option under
Advanced Options (#8) labelled as
GL Driver. In there choose
GL Full KMS. After selecting that, in the Advanced Options menu, make sure to go in to the
Memory Split and up the allocated memory. Try 256 and back it down until you find performance to be unacceptable. After adjusting these settings, make sure to reboot!
This also helped with many electron JS based applications too (especially those that didn't disable hardware acceleration with
app.disableHardwareAcceleration()). I found that some electron apps would have terrible performance with just basic CSS transitions (simple fades or translations). Even the devtools would be unresponsive.