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?

3 Answers 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.

  • Any feedback one year after ? For me, it's look better on Chromium on Raspbian.
    – benoît
    Jul 1, 2017 at 6:38
  • 1
    @benoît I know that the chromium team has been doing some great work to improve their arm distributions but as I haven't used the browser on the Pi in a long time can not personally comment on which browser performs better Jul 1, 2017 at 6:40

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.

  • Increasing the memory split won't help the GL driver at all, and only takes memory away from the Linux system and leaves it unused. Apr 4, 2018 at 16:10
  • What does the memory split do? Apr 5, 2018 at 17:58
  • It reserves memory for the VPU firmware. Since you're not using the VPU firmware for graphics, it just goes to waste. Apr 6, 2018 at 16:50

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: 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.

  • on a RPI 4 -> ElectronJS. This worked like a charm. No really... Try it!
    – Rip3rs
    Aug 19, 2021 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.