Background image showing strangely on a REAL iPad Horizontal View

Please check the website links provided in private, and test them on a REAL iPad. In my test, I’m using an iPad 9th Generation with latest iOS update 15.5.

You’ll notice that the first landing image background is showing strangely, as shown in the pictures. Why is this happening?

When testing this on Desktop F12 Console > iPad, it shows fine but not on a REAL iPad (all cache/cookies cleared) and tested on different browsers : safari, chrome, edge, firefox => all same result.

Attachments:

You must be logged in to view attached files.

Here is a staging site for one of the websites, with minimal install where the issue still happens.

Hi,

By default, background parallax effect is created with background-attachment: fixed CSS parameter. We have investigated that issue and found that the iOS platform has issues with supporting background-attachment: fixed; (https://forums.developer.apple.com/thread/99883). Unfortunately, that can’t be fixed via WordPress theme, and we didn’t have a complete solution for this.

As an alternative solution, you can add the following code snippet to the Custom CSS area in Theme Settings to disable background parallax in iOS related devices:

.platform-iOS .wd-parallax {
	background-position: center !important;
	background-attachment: scroll !important;
}

We will also add this fix to the theme until background-attachment: fixed will be fixed on the iOS level.

Best Regards

Ok great, thank you !

Hello,

You are welcome! If you have any questions or wish to learn more about our theme, do reach out to our customer service team at any time.

Have a good day!

Kind Regards

[Author]

Posts