Scrolling problems are a major issue for many websites. Often, the problem stems from ambitious design features which, although they look great, are often stilted in practice.
Did you know that a mere one-second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from.
The bottom line is that poor website performance – whether that’s slow load-times, sluggish video or stilted scrolling – can cause real damage to businesses.
Thankfully, some creative CSS can help fix scrolling problems and bring out the best in both design and performance.
In this article, we’re tackling a specific scrolling problem created by a static viewport-sized background image. In other words, the background image remains static while the foreground moves as you scroll.
If you’re familiar with this functionality, you’ll know that if executed in the correct way, it’s a stunning design feature. But all too often it’s far from perfect. Producing a jolting scrolling experience and poor performance.
How can this problem be fixed with CSS?
First, we want to point out that the role of CSS is not to undermine creative design. Instead, it strives to fix issues that hamper the performance of a website, when these problems stem from visual elements.
CSS can be used to rectify jolting scrolling issues, which can be an immediate source of frustration for web users. The first step is identifying what causes the problem, and then identifying a clever way to fix it.
What causes this specific scrolling problem with static background images?
The issue stems from the markup used to control this design feature – background-attachment: fixed – which requires a lot of background work.
Every time a user scrolls, the webpage has to reposition content and repaint the image relative to this content, to create the illusion that the image is static. This is known as ‘repainting’, and it can cause some serious performance flaws.
Use Google Chrome’s DevTools to diagnose the problem
To fix this scrolling problem, you’ll need to confirm the diagnosis. A quick peek into the timeline feature of Google Chrome’s DevTools reveals the problem – simply hit record and you’ll have real-time insight into the fps (frames per second). At around 60fps, there will be jitter in scrolling. From 30fps, there is a real cause for concern.
To resolve the performance issues, you’ll need the help of CSS. The background image requires its own element, which allows the image to move independently of other elements. To do this, you’ll need the will-change: transform property, which tells the browser to render the background element separately.
Any CSS change comes with a word of caution. Before you take the plunge, you’ll need a testing environment and an understanding of any potential knock-on effects, because a simple change could do more harm than good to your website’s performance.
Do your research and, if you’re not a front-end developer, find an expert who can do the job on your behalf. Your website, and your customers, will thank you for it.
