March
05
2025
CSS Background Image Issue - White Flash When Scrolling The Page
There was this white flickering when I scrolled the page after switching back from another tab. It happened really fast that I needed to record the screen and check the video frame by frame.
 |
When I tried changing the background color of the <html> tag, the flash also changed color. So, it seems something is hogging the rendering of my blog background.
Heavy Background Calculation
First thing that comes to mind is that I use a CSS repeating linear gradient for the <body> background. So it must have been doing a moderate calculation very often, causing the quick flash.
body {
--bg1: #272a30;
--bg2: #282c33;
background: repeating-linear-gradient(45deg, var(--bg1) 0px, var(--bg1) 20px, var(--bg2) 20px, var(--bg2) 40px);
}Setting the gradient background to the <html> tag, however, doesn't fix it. The white flash is still there.
Workaround
As a workaround, I set the background color of the <html> tag to match one of the gradient color.
html {
background: #272a30;
}The quick flash is still there, but is very unlikely to be noticeable. I even have to record another video just to make sure it is still there.
 |
Alternate Solution
Use a fixed background position.
There's this game website that uses a high resolution image for the background. It is set to a fixed position, and it doesn't flicker.
If you don't want a fixed background, then make sure to set the background color of the <html> tag so that the flash becomes less noticeable.
Open comments page