Choppy scrolling with "background-attachment: fixed"

Question

I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.

My code is here:

HTML

<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>

<div class="grad-space">
</div>

<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>

CSS

.con {
height: 100vh; }

.grad-space {
 height: 50vh; }

.row1 {
background: url('https://s-media-cache-    ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }

.row2 {
background:   url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }

Here's a link to the codepen showing exactly what I'm talking about: http://codepen.io/reskk/pen/qaYJwq

Edit: Fullpage Codepen: http://codepen.io/reskk/full/qaYJwq/

Now strangely enough when I resize the browser down to a small width (say 800px) the scrolling actually becomes very smooth - just as you'd want it to appear on a finished project.

When the browser is at its max width (and max height, which you can't quite fully get on codepen due to to the code-input box) that is where the janky, choppy scrolling happens.

I've done extensive searching on this and haven't been able to find a solution.

Does anyone have any ideas on this? It's such a gorgeous effect but is unfortunately made useless by the performance it yields.

Thanks,

Reskk

The difference is very noticeable at full browser size, particularly if you run it in a text editor and preview it without the codepen box taking up (i.e. how it would look to someone visiting the site.) Besides, that's not really a good approach (with regard to optimisation) — Reskk, Oct 11 '16 at 22:47
I just don't see anything wrong in your code. Maybe it's because of the pics resolutions or your computer speed. Just can't help you. Sorry. — kind user, Oct 11 '16 at 22:50
No problem, man. I'm running on a MBP 2014 so it shouldn't have any problems in that way. I'm thinking it has something to do with resolution as the lag disappears when the browser width is quite small (<1000px) - But then I can't really optimise it well as I may find an image resolution that works well on my machine but badly on another! It provides such a nice visual effect. Just comes at such a cost :( — Reskk, Oct 11 '16 at 22:53

Canilho · Answer 1 · 2016-10-11T23:15:51.617

1

You know you can see any codepen in full page? Fullpage Codepen

About your choppy effect, what you probably are looking is a scroll animation smoother, not sure if this is the right term. What it does is that delays the mouse scroll effect, or reduces "line jumps" height, making the movement look better.

CSS Parallax by davidwalsh

Edit removed frameworks/libraries references (offtopic)

edited Oct 11 '16 at 23:15

answered Oct 11 '16 at 22:53

Canilho

944
5
11

Thanks man. That plugin looks quite nice but it's not exactly what I'm going for. There's just something about the performance that this yields.. there has to be some way around it – Reskk Oct 11 '16 at 22:57
[Here is another alternative](https://davidwalsh.name/parallax), this time is parallax, not slider :D – Canilho Oct 11 '16 at 23:08
1

@Andre Canilho Those are JavaScript libraries that produce fixed/parallax background effects based on scrolling events. The question is asking about a CSS background with a fixed attachment, which has nothing to do with JS. – darrylyeo Oct 11 '16 at 23:14
I removed the libraries reference. The one by Davidwalsh is a CSS demo, so it is on topic. – Canilho Oct 11 '16 at 23:19

score 0 · Answer 2 · answered Mar 25 '21 at 19:33

I was stressing with the same problem, and found a lovely solution here: https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55

Essentially, you need to remove the background image from your .rows and move it to a :before element for each. That way you're not using background-position: fixed, but rather position: fixed on your pseudo element.

.hero {
  min-height: 100%;
  position: relative;
  overflow: hidden;

  &::before {
    background-image: url('background-image.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -1;
  }

Choppy scrolling with "background-attachment: fixed"

2 Answers2