parallax on iPadPro

Question

Created Mar ’24

Replies 1

Boosts 0

Participants 2

Is apple still deciding what we can view, disabling parallax on websites (safari) or is there a workaround? I am a graphic designer and web developer with an iPad Pro. iPadPro uses "desktop" css not tablet (due to its larger size), so it looks like the desktop website but the beautiful features of parallax are missing. Not helpful with troubleshooting and editing websites on iPadPro after hours. Anyone know a way to force parallax to work?

Boost

Answer 1

PeterVermont OP

Jul ’24

Hi, some suggestions:

You can try CSS changes. Adjusting your CSS specifically for Safari on iPadOS might help. You can use CSS media queries to target Safari on iPads and modify the parallax effects to be more compatible.

@supports (-webkit-touch-callout: none) { /* CSS rules for iPad Safari */ .parallax { /* Parallax styles */ } }

You can also try JavaScript Workarounds. Using JavaScript to detect the user agent and apply parallax effects conditionally might be another approach. There are JavaScript libraries like rellax.js or parallax.js that might work better with touch interfaces.

if (navigator.userAgent.includes('iPad') || navigator.userAgent.includes('Macintosh') && 'ontouchend' in document) { // Apply parallax effect // Example with rellax.js var rellax = new Rellax('.parallax'); }

Ensuring your viewport settings are correctly configured can sometimes resolve rendering issues.

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Try using a parallax library that is specifically designed to handle touch events. Some libraries offer better support for touch interfaces and might handle the nuances of Safari on iPadOS better:

Rellax.js: A lightweight parallax library that works well with touch devices.
Stellar.js: Another option that can be customized for better performance on touch devices.

If the parallax effect is still not performing well, consider providing a fallback for touch devices. This could mean a simpler, less resource-intensive animation or a static image.
Sometimes adjusting settings within Safari might help, although this is more of a user-end solution and might not be ideal for development purposes.

Go to Settings > Safari > Advanced > Experimental Features.
Experiment with enabling/disabling specific features related to rendering and animations.

By combining these techniques you may be able to achieve better performance and compatibility for parallax effects on Safari for iPadOS.

0