- This topic has 6 replies, 2 voices, and was last updated 7 years, 3 months ago by
.
-
Posts
-
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've messed around with the CSS for these sections and nothing has worked. Now, I've concluded that it's not a CSS issue at all. I think there is something - maybe in the javascript or functions file - that prevents the parallax working by default on a mobile. Some kind of rule that says: if viewing device is a mobile, then stop parallax from working. However, I cannot find anything that's doing this.
I'm look for a way to override this default behaviour for mobiles.
Thanks.
http://burrenjw.ie/devOn 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.
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.
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?
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.
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.
- The forum ‘General Discussion’ is closed to new topics and replies.