Link to home
Start Free TrialLog in
Avatar of Matt K
Matt K

asked on

Conflict/Bug disables y-scrolling (sort of) in Safari?

I have an old site here built in JQuery Mobile 1.2.1. It was working fine cross-browser until fairly recently.

As with all other sites in this client's family, this site is required to include a global navigation bar from the main organization, placed by including a js dependency at the end of the document head. This has been a requirement for some time and worked fine.

The site in question makes use of a hidden main nav that is revealed when a user clicks the menu button, at which point the page slides 175px to the right to reveal the main navigation on the left. Again, no problems there until recently.

I noticed only today that in Safari, when the global nav is called and the main navigation is revealed, gesture scrolling down the page (i.e., two finger trackpad or one finger on the Mac Pro wireless mouse) no longer works reliably. I say "reliably" because if you keep futzing long enough, you'll get some movement. If you scroll to the top of the page and past, it rubber bands back and you may be able to scroll down for a second or two. Strangely, x-scrolling is no problem (though this should probably  be disabled, as side scrolling isn't useful here). It's all super buggy-looking and very  strange.

Inspecting the code, I was able to find nothing with overflow-y:hidden (which was my immediate suspicion). I suppose that makes sense since I am able to scroll sometimes.

I noticed scrolling behavior returns to normal if I remove the required global nav script dependency. If only that were a viable option... I wouldn't be surprised if the nav's code was an issue... I just don't know enough about JS to say for sure.

If you have quick enough hands and can click and hold on the right side scrollbar in the browser window you can scroll the page freely until you let go.

This happens ONLY in Safari (12 and 12.1 are the only versions I've been able to try so far).

I'm not sure when this started, but I don't believe I've made any recent changes that could have caused it. I was wondering if this was something in a recent OS/Safari update. This occurs in no other browser. I use this site fairly often in Safari and think I would have noticed this behavior, but I can't be certain.

Unfortunately the code ecosystem is pretty big, and I think I'd have a hard time recreating this situation in a generic codepen or fiddle, and certainly wouldn't be able to do so without calling in the global nav bar (over which I have zero control), so I'm unsure how to proceed with getting help here. Still new here and getting my bearings (though I've already had a number of occasions where y'all have helped me out immensely).

I realize I've given no code and no examples, and that certainly makes it more difficult to help me. But I'm in a bit of a bind as I can't outright share the link, and I'm so flummoxed I don't know where to even begin looking for a solution without showing my rear-end to the world. For various (and obvious) reasons, I need to avoid doing this.

I'm very open to suggestions on how to best go about getting help here. I've set this question to private, but that isn't really enough in my case. I've been looking at this for a couple hours now and can't find any logic or reason behind what I'm seeing.

Thanks for looking – hope one of you's can guide me as to how to proceed. I'm 100% stumped. Sometimes just the cart of typing out and/or talking about a problem is enough to arrive at a solution. So far, nothing.

Thanks again!
ASKER CERTIFIED SOLUTION
Avatar of Matt K
Matt K

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of David S.
You didn't read the next paragraph?
If overflow-y is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto.
Unfortunately, they are linked. When you hide the overflow on one axis all you can do is choose which side(s) get a scrollbar.

Anyway, congrats on figuring it out yourself.