CODEWITHSUNDEEP
javascriptsafariparallax
trevorhinesley
trevorhinesley

Reputation: 875

Stellar.js parallax elements are jittery on Safari?

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.

Upvotes: 2

Views: 3946

Answers (1)

Scarraban
Scarraban

Reputation: 106

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.

Upvotes: 4

Related Questions