Community Forums › Forums › Archived Forums › General Discussion › Parallax Effect Not Working on Mobile Devices
- This topic has 6 replies, 2 voices, and was last updated 7 years, 3 months ago by leighm.
December 7, 2015 at 3:17 am #172913
I'm having a problem with the Parallax Pro theme. The parallax effect works fine on a desktop or laptop. Even when I drag the browser to engage the smaller media queries, the parallax still works on a desktop. However, if I then view the site on a mobile the parallax doesn't work.
I'm look for a way to override this default behaviour for mobiles.
Thanks.http://burrenjw.ie/devDecember 7, 2015 at 9:02 am #172956
On scroll events has long been known to not work the same on touch devices because...
All browsers fire an onscroll event on the window object whenever the window is scrolled. On desktop browsers this event is fired continuously as the user scrolls, but on most all mobile browsers the event is not fired until the scrolling action comes to a complete stop.
This is native behavior.
December 7, 2015 at 9:17 am #172963
Thanks for your reply, Carasmo. I wasn't aware of this behaviour.
You mention that on mobiles the event is not fired until scrolling action comes to a complete stop. If that's the case shouldn't I see some kind of jump in the image, once I stop scrolling? For me the image doesn't move at all.December 7, 2015 at 9:21 am #172964
Carasmo, I forgot to mention, on an iphone, there is a setting in safari that allows you to "Request Desktop Site" version. When you do this the parallax works, which seems strange given the scroll behaviour of mobile devices?December 7, 2015 at 10:55 am #172997
https://www.tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ and google for more recent articles on the subject. You'll find that it's not fruitful.
If a device its in desktop mode, I would assume that the touch events are turned of on the device. Natively, though it fires after the scroll, so parallax won't work.
December 7, 2015 at 10:59 am #173000
The image doesn't move because it's background position is adjusted on the onscroll event and it's likely that the CSS position fixed and the background-size:cover (which IOS has never worked great) is the culprit. I don't know, I never bothered with this since I've known for a long time it won't give the same results so I've explained that progressive enhancement includes behavior on devices and if a device doesn't handle certain style or jQuery or whatever, it will fallback to the native behavior which won't include all the desktop stuff necessarily.
December 8, 2015 at 4:16 am #173167
Thanks, Carasmo, for the explanation and for sending on those resources. Very helpful.
- The forum ‘General Discussion’ is closed to new topics and replies.