martyr.shop - Zoomed-in images animation is laggy and stutters

[Arecsu]

URL: https://martyr.shop/products/sealed-bags

Browser / Version: Firefox 103.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: Performance issues, stutter when CSS-transforms are applied to images
Steps to Reproduce:
Here's the Firefox Profiler capture: https://share.firefox.dev/3bhBNEd

I'm the owner of the site with the problems. Almost every image from every product experiences this problem in my computer. When clicked, they will zoom-in. That animation is very laggy and stutters a lot. Moving the mouse should move the image as well, and while is not as bad as the scaling transform, it still performs bad.

In chromium-based browsers, it works just fine. Seems something related to the webp decoder in Firefox? I'm not entirely sure.

EDIT: it's not related to the webp decoder AFAIK. It also happens with PNG files. This product page uses PNG images for the zoom effect.

In the reported URL, the image with the bag that says "DEFINITIVE SNACK" is by far the worst performer.

CSS will-change properties are enabled for images that have mouse hover. Javascript is using requestAnimationFrame for mousemove events. These 2 improved performance in all browsers, but Firefox still has a lot of stutter.

Haven't tested on other machines.

Specs:

• 3840x2160px screen. But it behaves the same at lower resolution.
• Windows 11
• nvidia 2070 Super, latest drivers
• AMD Ryzen 3700x
• 32gb ram 3200mhz

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue for some of the images after zooming in on the first ones.

I've recorded a performance profile: https://share.firefox.dev/3vArTV6

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 105.0a1 (2022-08-02), Firefox Release 103.0.1
Operating System: Windows 10 Pro

Moving to Needsdiagnsis for further investigation.

[qa_31/2022]

[denschub]

EDIT: it's not related to the webp decoder AFAIK. It also happens with PNG files. This product page uses PNG images for the zoom effect.

Soo.. fun fact. Even though the URL is https://cdn.shopify.com/s/files/1/0056/3766/8898/products/square-4-dark.png?v=1618259679, it's still returning a WebP image... :)

In any way, from looking at the profiles that @Arecsu and @softvision-oana-arbuzov captured, I can see that most of the time is not spend in rendering those images per se, but rather in downscaling them. The majority of image drawing time is spent in mozilla::image::DownscalingFilter::*, so that might be an indication.

I filed a perf bug for that: https://bugzilla.mozilla.org/show_bug.cgi?id=1786918 - and so I'll close this report.

[Arecsu]

Hey thank you so much for looking into it. Yes, Shopify parses the request headers from the browser and see if it's compatible with webp. If that's the case, it sends a webp image. Else, a PNG one. For some very specific images, PNGs are lighter than their webp counterparts, and Shopify sends the client the PNG one.

EDIT: https://cdn.shopify.com/s/files/1/0056/3766/8898/products/square-4-dark.png?v=1618259679 used to return a PNG image but now it returns a webp. Maybe Shopify optimized the webp version further, don't know. I don't have old logs or screenshots that shows this problem happened with PNGs as well. I'm 100% sure it's not just webp and maybe it has little to do with transparency.

Take a look here: https://martyr.shop/products/glass-m0rph1sm. Those have 0 transparency (webP though) and it's really laggy as well.

Anyways, I hope the performance gets better. Thank you again.

[denschub]

@Arecsu the linked bug now has an investigation result from someone who knows image rendering stuff! While I assume there will be a Firefox fix eventually, you might be interested in reading the latest comment - maybe that's something you can workaround!