Hey y’all,
My client’s homepage (in progress) is experiencing some weird jerking behavior when scrolling from top to bottom. The body background has a fixed image, size set to cover - the page is divided into sections. When you scroll top to bottom, it gets overlain by a gradient and an image in different sections, then back to the body’s fixed image. The sections are each set to 100vh height. From what’ve noticed, this only happens on Safari on Macbooks. So I know this may sound silly, and Macbook has had this issue in the past, but it wasn’t there before. And the biggest factor for me solving this is that my client has a Macbook and uses Safari.
So I have tested this with Chrome, Firefox, Opera, and Safari (Edge on mobile), on 24" monitors w/ Mac Mini, iPad, iPhoneX, my 13.3" Macbook pro, and a laptop with 15" Ubuntu for good measure.
Some of the other users on here have posted similar topics, but nothing that quite fixes my problem.
Only on Safari on the Macbook does this happen!!! Help!
It looks like your images are too big. Tastings.jpg is 4000w even though it is only displaying at about 500w. Try resizing all of your images that are not background images to 500w and re-upload. Some of your background images are too large and are probably causing performance issues. Resize all the background images to a maximum of 2880w. The images on the distilleries page are very large. Many of them are over 2MB. This will cause performance issues.
Figured it out. Since the body is divided into sections, it was having an issue with the image being attached directly to the body, so I just removed it from the body and attached it to specific sections in three different places to reproduce the same fixed background effect. For some crazy reason, attaching this image three times in different sections is easier on the Safari browser than it being attached directly to the body. No other browser had this issue. Thanks Ali_Z. The page does load faster with the re-sized images.