Description of the issue:
Some usage of css (eg, filter: blur(120px)) causes significant decrease in performance on some websites.
Performance degradation is in both scrolling, and interacting with the page.
This happens regardless of turning on / off Hardware Acceleration in Brave settings.
Steps to Reproduce (add as many as necessary): 1. 2. 3.
A good example is here https://www.svelvet.io/ has a div with the following.
<div class="css-blurry-gradient" />
This has
filter:blur(120px)
Disabling this filter (through devtools) fixes the performance, and scrolling and interaction becomes smooth.
This also occurs here
https://joyofcode.xyz/sveltekit-authentication-using-cookies
<div class="overlay" />
with the CSS rule
backdrop-filter: blur(20px);
Actual Result (gifs and screenshots are welcome!):
(page scroll performance is not particularly obvious in the video, but it’s similar to the lag displayed when dragging icons)
When the blur is not on the page (eg, scrolling to the bottom of the window) the performance becomes good until the blur is again visible.
Expected result:
Page scrolling and interaction is smooth.
Reproduces how often:
Every time.
Operating System and Brave Version(See the About Brave page in the main menu):
Windows 11 Pro - 21H2 - 22000.795
i7 12700k, 64gb DDR4, RTX 2080ti.
Brave Version 1.42.86 Chromium: 104.0.5112.81 (Official Build) (64-bit)
Ubuntu 22
Brave (Unknown, but assume the most recent (on my work pc))
Additional Information:
This does NOT occur with
Windows 11 Pro - Chrome Version 104.0.5112.81 (Official Build) (64-bit)
Windows 11 Pro - Edge Version 104.0.1293.47 (Official build) (64-bit)
Ubuntu 22 - Chrome (Assume most recent as above)