Slow CSS Transitions

[marvinfrankeengram]

Describe the issue I move an image (Full HD) using javascript with CSS Transitions. If the image is more in the middle of the window, the framerate drops very low, the framerate is higher if the image is mostly outside. If a video is playing in the background (even if the video element is only 1x1 Pixel), the framerate remains high and the transition runs smooth. The framerate is generally lower compared to the packages in raspbian.

Framerates	Yocto	Raspbian
Canvas test	10	20
Transition without video	19 down to 4	60 down to 10
Transition with background video	19	60

Do you know how the WPE/cog packages in the raspian repositories are being built? And is there any way I can prevent the framerate from dropping without adding a dummy video?

To Reproduce

1. Built using kas kas.yml.txt
2. Opened my test html in cog, with WEBKIT_SHOW_FPS=1 test.html.zip
3. Opened this canvas test in cog, with WEBKIT_SHOW_FPS=1
4. Repeated 2 and 3 within raspbian with wayland support activated and cog installed using apt.

Environment:

• yocto release: kirkstone
• hardware target: raspberrypi4 (RPI 400)

Thanks for your help!

[psaavedra]

Regarding Raspbian, what environment are you using for getting those results? Weston or mutter as Wayland compositor?

[marvinfrankeengram]

Regarding Raspbian, what environment are you using for getting those results? Weston or mutter as Wayland compositor?

I was using mutter.

Using nested weston inside of mutter results in similar fps. Up to 30 fps if I start weston with the drm Backend on a different TTY. Tried changing the repaint window, but it doesn't seem to have any effect.

[psaavedra]

Regarding Raspbian, what environment are you using for getting those results? Weston or mutter as Wayland compositor?

I was using mutter.

Using nested weston inside of mutter results in similar fps. Up to 30 fps if I start weston with the drm Backend on a different TTY. Tried changing the repaint window, but it doesn't seem to have any effect.

Could you test the fps for this 2 cases (in weston drm / mutter; and in Yocto and Raspbian)?

export WEBKIT_SHOW_FPS=1
export COG_PLATFORM_WL_VIEW_HEIGHT=768
export COG_PLATFORM_WL_VIEW_WIDTH=1024
cog -P wl https://webkit.org/blog-files/3d-transforms/poster-circle.html

export WEBKIT_SHOW_FPS=1
export COG_PLATFORM_WL_VIEW_FULLSCREEN=1
cog -P wl https://webkit.org/blog-files/3d-transforms/poster-circle.html

[marvinfrankeengram]

Note that Raspbian still uses cog 0.8.1, so I used the fdo backend there.

1024x768 on Raspbian Mutter: 60 fps* Fullscreen 1920x1080 on Raspbian Mutter: 30 fps

1024x768 on Raspbian Mutter + Weston: 55-60 fps* Fullscreen 1920x1080 on Raspbian Mutter + Weston: 30 fps

1024x768 on Raspbian Weston: 30 fps Fullscreen 1920x1080 on Raspbian Weston: 30 fps

1024x768 on Yocto Weston: 30 fps* Fullscreen 1920x1080 on Yocto Weston: 30 fps

I also noticed one thing in some cases (marked with *): If the browser window has the focus, the framerate can drop by ~20%.

[psaavedra]

1024x768 on Raspbian Weston: 30 fps

...

1024x768 on Yocto Weston: 30 fps*

Those rates are certainly unexpected.

[psaavedra]

Some ideas:

• Could you try with MACHINE=raspberrypi4-64 ?
• ... PREFERRED_VERSION_wpewebkit = "2.36.8" ?

What Rpi kernel version are you using in your image?

[psaavedra]

... also raise the GPU memory by adding the following:

GPU_MEM_256 = "128"
GPU_MEM_512 = "196"
GPU_MEM_1024 = "396"

in the conf/local.conf.

[psaavedra]

Note that Raspbian still uses cog 0.8.1, so I used the fdo backend there.

1024x768 on Raspbian Mutter: 60 fps* Fullscreen 1920x1080 on Raspbian Mutter: 30 fps

1024x768 on Raspbian Mutter + Weston: 55-60 fps* Fullscreen 1920x1080 on Raspbian Mutter + Weston: 30 fps

1024x768 on Raspbian Weston: 30 fps Fullscreen 1920x1080 on Raspbian Weston: 30 fps

1024x768 on Yocto Weston: 30 fps* Fullscreen 1920x1080 on Yocto Weston: 30 fps

I also noticed one thing in some cases (marked with *): If the browser window has the focus, the framerate can drop by ~20%.

Also it seems mutter being consistently lighter than Weston as WAyland compositor.

[psaavedra]

Checked the mutter package available for RPI [0] , it seems this comes patched with the triple buffer implementation (https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/1441/diffs) what apparently boost 2x the performance of the compositor [1]. That could justify those better numbers for the case of mutter.

[0] https://mirror.ox.ac.uk/sites/archive.raspbian.org/archive/raspbian/pool/main/m/mutter/mutter_43.0-2.debian.tar.xz [1] https://www.phoronix.com/news/GNOME-Triple-Buffering-2x

[marvinfrankeengram]

Some ideas:

• Could you try with MACHINE=raspberrypi4-64 ?
• ... PREFERRED_VERSION_wpewebkit = "2.36.8" ? ... also raise the GPU memory by adding the following:

GPU_MEM_256 = "128"
GPU_MEM_512 = "196"
GPU_MEM_1024 = "396"

in the conf/local.conf.

still 30 fps

Also it seems mutter being consistently lighter than Weston as WAyland compositor. Checked the mutter package available for RPI [0] , it seems this comes patched with the triple buffer implementation (https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/1441/diffs) what apparently boost 2x the performance of the compositor [1]. That could justify those better numbers for the case of mutter.

[0] https://mirror.ox.ac.uk/sites/archive.raspbian.org/archive/raspbian/pool/main/m/mutter/mutter_43.0-2.debian.tar.xz [1] https://www.phoronix.com/news/GNOME-Triple-Buffering-2x

It appears to be so. For this reason, I tried sway and wayfire too. Using sway I got 30 fps, just like weston. Wayfire appears to be an alternative to mutter. I could even reach 40 fps at 1920x1080. Used recipes from https://github.com/MarkusVolk/meta-wayland

Regarding the other question (framerate dropping if no video is playing): I used CSS-Transitions on the left-Property, which is discouraged. Using translate, as recommended in https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/, results in a stable framerate.

Thanks for your help!