How to Fix Divi Parallax Not Working on Safari

I recently discovered that Divi’s Parallax feature doesn’t work on Safari (on November 2024). When you scroll down, the background image just scrolls with the page like a regular background image. It doesn’t work whether you choose “True Parallax” or “CSS”.

It works on all other browsers.

According to this Reddit thread, the problem happens in Mac OS Sonoma and has been that way for over a year.

The Culprit

Divi has a class, “et_mobile_device” that it is supposed to add when viewing the site on mobile. When that class is present, the background attachment for the parallax background image is set to “scroll” because we don’t want parallax on mobile (the background image gets stretched to the full site height instead of browser height and will be super zoomed in).

The problem is that Divi is adding that class on Safari, even when on desktop. Thus, the parallax backgrounds are set to scroll with the page instead of being fixed.

The Fix

This first fix is for the “CSS” parallax method:

The fix is to add this CSS to your site (usually in the Customizer or a child theme):

/* FIX FOR PARALLAX ON SAFARI NOT WORKING */
@media all and (hover: hover) {
	.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
	background-attachment: fixed !important;
  }
}

This overrides the mobile class when the browser has “hover” capability, i.e., it is not a touch screen.

As I mentioned, this does not affect “True Parallax” mode. Any sections that are set to “True Parallax” won’t have the parallax effect on Safari. The background image will just scroll with the content.

There is no fix for True Parallax on Safari other than to make it behave like CSS parallax. If you want to do that, use this code:

@media all and (hover: hover) {
.et_mobile_device .et_pb_section_parallax .et_parallax_bg, 
.et_mobile_device .et_pb_slides .et_parallax_bg {
	background-attachment: fixed !important;
  }
}

In other words, use this code if you have sections set to “True Parallax” and you are OK with them behaving like CSS parallax on Safari.

Conclusion

Did these work for you? Questions? Please leave a comment below if this helped you. – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com