Stellar.js视差元素在Safari上不稳定吗？

Question

I know this question has been asked before, but I have tried making the background images fixed and it doesn't help.

You can view the problem here when you scroll down to the thumbnail gallery.

I really don't know what the problem is, but here is the code for the backgrounds that are jittery:

#content1 {
  background: #395668 url(../img/studio-9.jpg) fixed no-repeat center;
  padding-top: 120px;
  padding-bottom: 120px;
}

#gallery {
  background: url(../img/studio-8.jpg) fixed no-repeat center;
  padding-top: 160px;
  padding-bottom: 160px;
}

Any clue what's happening?? Looks fine in Chrome and decent in Firefox.

Answer 1

This unfortunately isn't to do with your coding, but rather the browsers themselves, as Safari reacts to mouse scrolling very differently to Firefox and Chrome.

Firefox and Chrome track mouse scrolling throughout the scrolling process, which is what makes the Parallax effective.

However, with Safari, mouse scroll position isn't updated until the user has finished scrolling, which is what causes the jittery effect.

The only option is to disable the Parallax effect for Safari users.