On first load of any page using the background images, a white flash will be seen. I'd like to eliminate this somehow.
If you're not aware of how the backgrounds are done in this application, they can be rather complex and carefully done. Getting them to stay still, scale properly, have effects filter, and change size on different platforms (srcsets) is a complex job. I don't believe this issue is high priority nor easy to fix.
The only thing of note is that the index doesn't have a strong white background after the first load, even with hard refreshes. It does have a slight white gradient around the edges, but I believe this is an artifact of the blurring process for image loading.e
Some ideas:
- Use CSS to apply a default color across the body.
- Different pages use a different background image, so the color needs to be consistent. This might work as long as only the Index uses the special 'blue' background image and the rest use a different color for the background.
- Embedding the background image in the page with SSR
- Seems pretty complex. If it was possible and not insanely difficult, I probably would've done it when I originally developed this solution. I don't recommend trying this, but maybe there's an idea here.
On first load of any page using the background images, a white flash will be seen. I'd like to eliminate this somehow.
If you're not aware of how the backgrounds are done in this application, they can be rather complex and carefully done. Getting them to stay still, scale properly, have effects filter, and change size on different platforms (srcsets) is a complex job. I don't believe this issue is high priority nor easy to fix.
The only thing of note is that the index doesn't have a strong white background after the first load, even with hard refreshes. It does have a slight white gradient around the edges, but I believe this is an artifact of the blurring process for image loading.e
Some ideas: