How to Disable CSS Parallax on iOS Devices to Avoid the Zoomed In Bug

If you have a website that uses the CSS parallax effect on background images (i.e., background-attachment:fixed), you might have noticed that those backgrounds get super zoomed in on iOS devices.

That’s because on those devices, the background image is expanded to the height of the whole site, rather than the browser window, resulting in the visible area looking really zoomed in.

The workaround for this is to disable that type of parallax on all tablet devices using the code below. The .et-pb-parallax-background class is specific to Divi, but you can change it to whatever your background image container uses:

/* DISABLE PARALLAX ON TOUCH DEVICES */
@media only screen and (hover: none) and (pointer: coarse) {
	.et-pb-parallax-background {
		background-attachment: scroll !important;
	}
}

Speaking of Divi, another workaround would be to use it’s “true parallax” setting which uses JavaScript for the parallax effect and doesn’t have this problem on iOS devices.

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. If you need help with your site, you can hire me!

brianshim.com