1557908 - Firefox of Android: CSS filters on static background causes jank on first load

Status: NEW

(Core :: Graphics, defect, P3)

Description

[Brian Peiris]

Attachment: css jank test pages

CSS filters on background images cause page load performance issues in Firefox on Android. Even a simple grayscale filter adds ~300ms to page load time. A blur filter introduces additional jank. Chrome on Android does not demonstrate this performance issue.

I've created simple test pages to demonstrate the issue. Each page displays the delta time for the first 10 requestAnimationFrame callbacks. Switch between the "plain", "grayscale" and "blur" links to compare performance. There are also test pages with iframes for comparison.

https://brianpeiris.github.io/css-filter-jank/index.html

The same test pages are attached in a zip file here.

I've reproduced the performance issue in FFA 67, 68 (Nightly) and Firefox Focus 68 on my Samsung Galaxy S8.