Background image scale issue in Safari using Classic Section

Support
#1

I’m using a Classic Section with a parallax background. On an iPad Pro, the background image renders correctly in Chrome, but in Safari it’s scaled up super large. It’s looks fine on desktop and mobile browsers. It seems unique to tablets.

#2

Hello @samuraicow,

Thanks for writing in! It seems that you are having some caching issues. We highly recommend that you clear all your caches and test your site again. You may also do the following:

And by the way, we haven’t been able to view your site because of a Cloudflare issue. See the secure note below.

Best Regards.

#3

Deactivated WP Rocket and Cloudflare caching and still seeing the issue. Btw, setting Safari’s User Agent to iPad Pro doesn’t re-create the issue on desktop computers. For some reason it only appears this way when actually viewing it on an iPad Pro device. Looks fine on Safari for iOS as well. Strange!

#4

Hi @samuraicow,

It is very hard to recognize what exactly you are seeing in the iPad Pro. I would suggest you provide any video along with the version of device and operating system you are using, which help us to recognize and replicate the problem.

Thanks

#5

iPad Pro (12.9-inch) (5th gen) running iPadOS v15.6.1

#6

Hey @samuraicow,

I couldn’t test on the latest iPad right now, but the Classic Section Parallax has a known issue with iOS. It’s best to disable the Classic Section Parallax for now.

It’s best to rebuild the page using the V2 (non-Classic Section) Parallax because it is not CSS based (background-attachment: fixed), which is technically the one in conflict with iOS.

We do not have a solution to this right now.

Please stay tuned.

Thanks.

#8

With V2, is there any way to fix the background in position the way (background-attachment:fixed) allowed in V1 with parallax?

It also seems like V2 scales up the image far greater than V1 when you enable parallax. Even if I set the scale to 100% (which essentially disables the parallax effect entirely) the image is still scaled up farther than when I enable parallax in V1. Is there a way to override the translate3d() call to set the z-axis further away?

#9

Hello @samuraicow,

It may need custom CSS coding or a complete recoding of the background to be able to override the Translate3d() call. This is beyond the scope of our support already. Anyways, this has been reported already and our developers are made aware of this.

Thank you for your understanding.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.