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

Matt K
Matt K used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Web Designer
Commented:
Well, I was able to resolve it. Now if only the resolution made the slightest bit of sense.

This bit of css on <body> from  JQM was what was (somehow) preventing vertical scrolling when the menu was open:
body.ui-mobile-viewport, div.ui-mobile-viewport {
    overflow-x: hidden;
}

Open in new window

Disabling this in the inspector gave me my vertical scroll back. So I simply overrode that rule in my css.
body.ui-mobile-viewport, div.ui-mobile-viewport {
    overflow-x: visible;
}

Open in new window

After that, all looks good and the page behaves as it used to – in fact, a little better, as I noticed that in some cases the nav (and oddly, the global header as well) and the page/content were scrolling independently of one another (also a recent development), which looked weird and was not ideal.

Oddly enough, even with the original "overflow-x:hidden" rule in effect, horizontal scrolling was functional when the menu was open. Normally I'd try to disable that, but I think I'll just put up with it for the paltry remainder of this version's lifespan. This all was just too weird.

First of all, why on Earth would overflow-x have this effect on vertical scrolling? According to MDN:

"The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges."

That was always my understanding. But again, in this case, overriding that rule was necessary to allow vertical scrolling when the left menu was open, and horizontal scrolling remains unaffected either way.

This code is vast and pretty ancient. I'm in the process of an upgrade to 1.5. I can lose this whole hand-hacked nav and use the Panels feature instead.

They futz with this global header fairly regularly (changing or re-arranging classes) without noticing any of the subs, and that can sometimes have an effect on the site's display.

I'd like to call this a solution – it's solved in that my site isn't broken in Safari anymore... but it's still a mystery to my why the "fix" worked. I realize again this is all hypothetical, and that the question was rather obscure and low on information, but if this rings any bell for anyone – you've seen how overflow-x can affect vertical scrolling and not horizontal – I'd love an explanation.

Thanks for looking, all.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial