1941329 - woven-city.global | Low SVG path Animation framerate

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Marco Vockner]

Attachment: 2025-01-13 14-09-30.mkv

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Steps to reproduce:

1. Visited https://www.woven-city.global/
2. Waited for site to finish loading
3. Scrolled down

Profiler URL: https://share.firefox.dev/4gI5Gdb
Attached video is in 120hz, clearly shows slower framerate on animation (especially visible on carousel)

Actual results:

Site loaded fine but CSS Animations seem to be choppy/low framerate compared to other browsers.

Expected results:

The performance should be comparable on the same hardware.

Comment 1

[Bas Schouten (:bas.schouten)]

The Performance Impact Calculator has determined this bug's performance impact to be medium. If you'd like to request re-triage, you can reset the Performance Impact flag to "?" or needinfo the triage sheriff.

Platforms: Windows
Impact on site: Causes noticeable jank
[x] Affects animation smoothness
[x] Able to reproduce locally

Comment 2

[Ashley Hale [:ahale]]

The problem here is that the background is comprised of multiple nearly full-page SVG vector images which are being rendered in software, we don't currently have an SVG hardware rendering path (I think?) so this is slow, the rest of the page animation is jerky due to the CPU having to render all of this and the GPU upload bandwidth being saturated by it.

Nical - do we have a meta bug for tracking candidates for accelerated SVG path rendering?

Comment 3

[Nicolas Silva [:nical]]

Most of the bugs under wr-blob-perf would benefit from rendering the paths on the GPU so It is fine to leave this one in this bucket. In this case (short of moving all of the rasterization to the GPU) we would do better if the blob layerization code was more aggressively the animated SVG into a single layer. What kills the smoothness of the scrolling and animations is that we end up producing too many blob tiles to upload each frame (because of the overlapping layers).