2

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?

0

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 '17 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 – Mohammad Ali Jul 1 '17 at 6:40
4

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. – Eric Anholt Apr 4 '18 at 16:10
  • What does the memory split do? – Jaymes Bearden Apr 5 '18 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. – Eric Anholt Apr 6 '18 at 16:50

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.