-
Notifications
You must be signed in to change notification settings - Fork 65
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
alveusgg-website-3ihrctq0r-alveus.vercel.app - Background-image base64 SVG blur rendering lag #128656
Comments
We appreciate your report. Unfortunately having insufficient details about the issue you submitted, we cannot help you with it. Please leave a comment with more details regarding the issue you are facing and steps to reproduce it, or file a new report with specific details and we will gladly investigate this further. A screen rec of the issue reproducing would help the investigating process. [qa_43/2023] |
👋 I've already attached profiler reports that show the increased CPU usage, and the links for the pages used to generate those reports, as well as detail on what I suspect to be the cause (the background-image on the hero slideshow images). What more information would you like from me? |
I was not able to reproduce the issue following the steps to reproduce. Tested with: Browser / Version: Firefox Release 118.0.2 (64-bit)/ Firefox Beta 119.0b9(64-bit)/ Suggestion: Try clearing cache/data/cookies, disabling add-ons and Ad-blocker (if available) and extensions or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in [inv_43/2023] |
This is reproducible for me on a completely fresh installation of Firefox with no extensions etc., and no need to interact with the page beyond opening it. Firefox 119.0 (64-bit) on macOS Ventura 13.6 (22G120) w/ an Apple M1 Pro. Here are some recordings showing this:
Screen.Recording.2023-10-24.at.14.41.55.mov
Screen.Recording.2023-10-24.at.14.43.45.mov
Screen.Recording.2023-10-24.at.14.42.51.mov
Screen.Recording.2023-10-24.at.14.44.20.movFor reference, the associated code difference between these two links is alveusgg/alveusgg@47effed, which removed the auto-generated background-image on the hero slideshow images (if you disable JavaScript on the problematic link, you'll be able to see thse in the source -- they get removed once the full-res images load). |
@MattIPv4 Thanks for the screen rec. I was indeed, able to reproduce the issue. There is a considerate loading time for the default hero background image, and there are performance issues as well. Moving the issue. We appreciate your report. I was able to reproduce the issue by following the steps to reproduce Tested with: Browser / Version: Firefox Release 119.0 (64-bit)/ Firefox Nightly 121.0a1 (2023-10-23) (64-bit) /Chrome Version 118.0.5993.89 (Official Build) (64-bit) Notes:
Moving this to NeedsDiagnosis for further investigations. [inv_43/2023] |
URL: https://alveusgg-website-3ihrctq0r-alveus.vercel.app/
Browser / Version: Firefox 119.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Chrome
Problem type: Something else
Description: background-image base64 SVG blur rendering lag
Steps to Reproduce:
https://alveusgg-website-3ihrctq0r-alveus.vercel.app/ makes use of Next.js placeholder="blur" for the background images in the hero slideshow. This attribute in Next.js results in a background-image being set on the images in the HTML that contains a base64 SVG that blurs a base64 JPG/PNG.
These placeholders work great in Chrome and provide a blurred low-res placeholder under the full-res images load, but in Firefox these placeholders seem to cause the entire page to lock up and stop rendering for upwards of 30s sometimes until the full-res images have loaded.
For comparison, https://alveusgg-website-cq282edqo-alveus.vercel.app/ removed the placeholder="blur" and the rendering lag is no more, the page loads instantly.
You can see the difference in these two profiler runs (using the developer tools profiler set to graphics) -- with the placeholder background-image in place on the hero slides, the browser spends well over 30s sitting at nearly 100% CPU usage computing graphics, but without those placeholders the page loads normally: https://share.firefox.dev/48T9Lro vs. https://share.firefox.dev/407QEpx
Browser Configuration
From webcompat.com with ❤️
The text was updated successfully, but these errors were encountered: