www.justdial.com – Unable to scroll the "Title menu" bar

softvision-oana-arbuzov commented 7 years ago

URL: https://www.justdial.com/Bangalore/Q-Bar-Lounge-&-Terrace-Opp-Airtel-Office-Koramangala-7th-Block/080PXX80-XX80-160428141658-G4I5_BZDET/menu#/ Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-21) Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density) Problem type: Mobile site is not usable

Steps to Reproduce

Navigate to: https://goo.gl/jmAFgR.
Scroll the "Title menu" bar.

Expected Behavior: Title bar is scrollable.

Actual Behavior: Nothing happens. Title bar is not scrollable.

Note:

Note that the text is also truncated on the right side.
Only the menu bellow the title bar is scrollable.
Reproducible on Firefox 54.0 Release (Mobile).
Not reproducible on Chrome (Mobile) 58.0.3029.83.
Screenshot attached.

Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov

sv; country: in

notscrollabletitlemenubar

From webcompat.com with ❤️

MDTsai commented 7 years ago

Confirmed, I can reproduce this issue using Firefox mobile 56. But on Firefox 56 responsive mode, if I disable touch simulation, I can scroll. In the ul element:

<ul class="rn-carousel-indicator custom-indicator" ng-hide="searchactive">

This element only listen to mouse up/down/move event, so I think it's why not work on Firefox. Maybe Chrome also convert mouse event to touch event?

karlcow commented 7 years ago

note that the link is http://wap.justdial.com/verticals/foodnew?docid=080PXX80.XX80.160428141658.G4I5&source=2&cdata=%7B%22img%22%3A%22https%3A%5C%2F%5C%2Fcontent4.jdmagicbox.com%5C%2Fcomp%5C%2Fbangalore%5C%2Fi5%5C%2F080pxx80.xx80.160428141658.g4i5%5C%2Fcatalogue%5C%2Fq-bar-koramangala-7th-block-bangalore-281oe.jpg%22%2C%22cn%22%3A%22Q+Bar+Lounge+%26+Terrace%22%2C%22ar%22%3A%22Koramangala+7th+Block%22%2C%22dcty%22%3A%22Bangalore%22%2C%22cty%22%3A%22Bangalore%22%2C%22rt%22%3A%223.5%22%2C%22mn%22%3A%22300%22%2C%22op%22%3A%220%22%2C%22sod%22%3A%220%22%2C%22cod%22%3A%221%22%2C%22totrt%22%3A%2211%22%2C%22cpno%22%3A%22%2B%2891%29-80-33542452%22%7D&isordoln=0&native=&version=&hide_header=1&sid=&mobile=&name=&email=&hide_header=1#/

This is an angular web site. And as @MDTsai said:

We had a number of issues lately in multiple issues where even when ontouchstart is not defined the scrolling is working on Chrome but not on firefox.

@miketaylr do you think we should explore this. Maybe a reduced test case would help.

karlcow commented 7 years ago

I remember @patrickhlauke doing tests. https://patrickhlauke.github.io/touch/tests/results/

patrickhlauke commented 7 years ago

Had a quick look, and it seems that particular part of the page doesn't rely on touch events, but just on that menu bar being a scrollable overflow:auto component. Something is preventing the native scrolling of overflowed components to work properly it seems.

karlcow commented 7 years ago

oh wait. Sorry @patrickhlauke I just realized.

The menu item is nested in a ul element:

<ul class="rn-carousel-indicator custom-indicator" ng-hide="searchactive">

<!-- cut -->
</ul>

with the following CSS.

.custom-indicator {
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.custom-indicator {
    width: 100%;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    z-index: 99;
}

it relies on -webkit-overflow-scrolling and has a weird overflow: -moz-scrollbars-none; which according to MDN on overflow would be an equivalent of hidden

Use overflow: hidden instead.

When we deactivate the overflow: -moz-scrollbars-none;, we fall back on the overflow: auto and the scrolling is working, which is what is happening on webkit. The -webkit-overflow-scrolling is just here for the momentum-based scrolling. If I put overflow: hidden, the scrolling stops in Safari too.

FIX

Just remove overflow: -moz-scrollbars-none;

webcompat / web-bugs

www.justdial.com – Unable to scroll the "Title menu" bar #7650

FIX

Next