Bug 252948 – [GTK] Peculiar performance issue on https://www.axiom.co/pricing

• Status: RESOLVED
• Resolution: FIXED
• Component: WebKitGTK

[Kdwk]

On https://www.axiom.co/pricing, scrolling down is smooth, scrolling up is 1fps, highlighting the title is also 1fps. This problem cannot be observed in iOS Safari.

Tested on Intel i7-9700/UHD630 (Wayland), Thinkpad X220/ Intel Sandybridge graphics (X11), Intel Kabylake laptop (4K display, Wayland)

[Kdwk]

Created attachment 465177 [details]
Screencast showing performance issues on the site

[Kdwk]

Created attachment 465178 [details]
Sysprof capture while the issue is occurring

[Fujii Hironori]

WinCairo also has a similar problem in the page.
It has filter:blur(180px). Removing the property works around the problem.

> <div class="absolute top-10 md:top-[unset] left-0 right-0
>   bottom-0 w-full h-full opacity-70 md:scale-75"
>   style="background-image:linear-gradient(107.27deg, #000AFF
>   33.59%, #7E18FF 57.24%, #D322FF
>   79.79%);opacity:0.3;filter:blur(180px)">

[Jeff Fortin]

In addition to the ThinkPad X220 and Intel Kabylake hiDPI laptop mentioned above, the computer where I'm seeing the nastiest performance impact is on my desktop computer, a Fedora workstation with open source AMD "pitcairn" graphics (Radeon R7/R9 270) on X11.

So it can happen both on modern Intel and AMD graphics at least, both on X11 and Wayland, but the problem may be easier to notice on AMD, where not only scrolling up lags, but also scrolling down... or just even idling the top of the page while loading without touching anything, it eats my 8 Intel Xeon and renders at maybe 0.05 to 0.5 frames per second (just judging from gut feeling on what I see here) for many minutes. When not scrolling, it seems the massive lagging happens while the page is loading or when some new element gets loaded, particularly.

[Carlos Garcia Campos]

If the issue is the blur filter then the problem is that we are doing blur filters in the cpu (bug #240865), which is slow, but doing in the GPU gives bad rendering results because of #231653.

[Kdwk]

Not sure if related -- there are two of the following error in the console:

[Error] WebSocket connection to 'wss://api.getkoala.com/cable?profile_id=a892cb31-d3cb-4f98-be87-6d799346483f&project_slug=axiom' failed: WebSocket is closed before the connection is established.
	reopen (sdk.js:2:41475)
	(anonymous function) (sdk.js:2:40169)

[Kdwk]

Fixed in WebKitGTK 2.45.x