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?
Raspberry Pi Stack Exchange is a question and answer site for users and developers of hardware and software for Raspberry Pi. It only takes a minute to sign up.Sign up to join this community
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.
Next to the tip from Jaymes Bearden chaging in the
raspi-config the driver to
GL Driver is changing the CSS Animations to 3D Animations, found here
[...] You actually have one option, it's a simple hack. [...] it does force the GPU [...] The trick is to use 3D animations, but that do not make your element move. Here's a list of simple non-appareance changing animations you can apply to force GPU on a smartphone :
transform: translateZ(0); transform: translate3d(0,0,0); perspective: 1000; backface-visibility: hidden;
Of course, you must prefix them with appropriate prefixes. webkit, moz, ms, o.
I have tested it on Raspberry PI 3 in Chromium, and it does make the CSS Animations much smoother but still not 100% perfect.