parallax scroll effect works in all devices but iPad & iPhone

[andres_jimenez]

Hi everybody,

I just built a site using Muse CC 2017, and feel a little frustrated because the scroll effects do not work on iOS devices.

here is the link to the site www.andresjimenez.ch

Any clue ? THX

[Ussnorway · Accepted solution]

apple devices are well known to not work good on scroll... thats a nice desktop design but its not good for any phone;

• your return to top script wont work on most phones,
• they will not load the (news | index) page because you have far too much going on
• and the phone menu in the top right will not display correct in a small screen device

you did make an effort to center line the objects which is good for phones

[andres_jimenez]

Hey, thanks for your contribution. Well, on my devices, iPad 4 & iphone 6, everythng works but the parallax scroll effect.

But your'e right it won't probably not display correctly on smaller phones.

[Pavel_Homeriki]

Parallax effects should not be used for mobile devices. This is a common practice, not only the practice of Muse.

[jamie45266176]

Hi, it would be nice to have parallax scroll effects working on iOS. When I try this the images become very blurred and are rendered at the wrong size. Any widgets available?

[fotoroeder]

Trust Ussnorway​ and Pavel Homeriki​.

Honestly

Uwe

[jamie45266176]

Hi

It works in wordpress here Scroller | Just another WordPress site

Could it be done in Muse?

[fotoroeder]

If you watch the site on mobile you`ll see, no scroll motion effect – at least in the developer tool from Safari.

[jamie45266176]

Hi,

The Wordpress website works ok on my iPad.

[patrickh56290551]

Andres,

first of all, great site. Your parallax scrolling is cool. Parallax scrolling does work on phones. Just go to www.apple.com... they have a lot of parallax scrolling.

There are, however, lots of different break points for different phones. I'm not sure how to make my parallax scrolls work on a phone, but i'm going to find out and get back to you.

Here are some of the different sized devices:

iPhone X-1 375x812

iPhone 6/7/8 plus 414x736

iPhone 6/7/8 375x667

iPhone 5/SE 320x568

Android Mobile 360x640

iPad 768x1024

iPad Pro 10.5” 834x1112

iPad Pro 12.9” 1024x1366

Android Tablet 768x1024

Surface Pro 3 1440x960

Surface Pro 4 1368x912

Web 1280x800

Web 1366x768

Web 1920x1080

Nexus 6P	1440 x 2560	411 x 731
Nexus 5X	1080 x 1920	411 x 731
Google Pixel	1080 x 1920	411 x 731
Google Pixel XL	1440 x 2560	411 x 731
Google Pixel 2	1080 x 1920	411 x 731
Google Pixel 2 XL	1440 x 2560	411 x 731
Samsung Galaxy Note 5	1440 x 2560	480 x 853
LG G5	1440 x 2560	480 x 853
One Plus 3	1080 x 1920	480 x 853
Samsung Galaxy S9	1440 x 2960	360 x 740
Samsung Galaxy S9+	1440 x 2960	360 x 740
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S8+	1440 x 2960	360 x 740
Samsung Galaxy S7	1440 x 2560	360 x 640
Samsung Galaxy S7 Edge	1440 x 2560	360 x 640
Tablets
Nexus 7 (2013)	1200 x 1920	600 x 960
Nexus 9	1536 x 2048	768 x 1024
Samsung Galaxy Tab 10	800 x 1280	800 x 1280
Chromebook Pixel	2560 x 1700	1280 x 850

[patrickh56290551]

Okay Andres, first thing I found was that you can turn off your "reduce screen motion". Reduce screen motion on your iPhone, iPad, or iPod touch - Apple Support

[patrickh56290551]

Here is your answer, Andres: GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and de...

[fotoroeder]

On my Android watching "apple.com" – no scrollmotion at all. No pinning at all.

The site you mention from above is a template isn`t it?

The sroller template on mobile (still android) shows only a very reduced scroll motion very far at the bottom, which could also be left away, from a designers point of view.

Kind Regards,

Uwe

[Ussnorway]

fotoroeder  wrote

The site you mention from above is a template isn`t it?

its a design testing area i.e, it works that way only within the special testing server custom built for it