Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jonathan Fernandez
Jonathan Fernandez
8,325 Points

Parallax Lag?

Hey guyz!

So I found this code snipet on the web for a parallax effect. I think it's great! BUT.. the one thing that bugs me is that it lags upon scrolling. I'm just curious as to know why this happens. Any of you advance css students here know why this happens? Any advice is greatly appreciated.

Attached below is my code:

.container {
  max-width: 960px;
  margin: 0 auto;

}
header.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
header.module.parallax h1 {
  color: rgba(255, 255, 255, 1);
  font-size: 48px;
  padding-top: 200px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-top: -20px;
/*   text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
}
header.module.parallax-1 {
  background-image: radial-gradient(transparent, #000),
                    url('/*your background image here*/');
}
Jonathan Fernandez
Jonathan Fernandez
8,325 Points

Did some testing with developer tools on chrome. Apparently it's the

header.module.parallax {
  background-attachment: fixed;
}

that causes the scroll lag.

1 Answer

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

I'm having the same issue.

I currently have a fixed background image for one section of the site and when I'm scrolling down that one section it is extremely jumpy and choppy on Chrome only. Even IE is fine.

Does anyone have a solution?