Site scrolling very slowly

[TEades]

Hey all! New here. I have a scrolling problem with one of my sites, and I’m not sure if it’s HTML, CSS, or JS that is causing it. it’s at https://www.morgancc.edu/gala/ It tends to scroll very slowly if you use the scroll wheel on your mouse. I have taken out any custom JS and disabled lazy loading, but I still have the issue. I would appreciate any help or tips!

(I can code, but I developed this one in Webflow. I have already been to their community support group, but no help there.)

[PaulOB]

HI,

It’s the background attachment fixed on that very heavy svg that is slowing the scrolling of the page down (on Chrome at least).

I suggest you remove the background-attachment fixed and place the svg image on a pseudo element that is itself position:fixed and will allow the page to scroll more smoothly.

e.g.

body.body{background:transparent;}
body:before {
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: url(https://www.morgancc.edu/gala/images/emerald-background-01.svg);
  background-size: cover;
 z-index:-1;
}

Background-attachment fixed combined with background-size:cover doesn’t work properly on mobile devices anyway so it’s best to do as I have shown above.

The body:before is fixed position so it doesn’t scroll and therefore the background image doesn’t need to be background-attachment:fixed and that frees up the browser scrolling.