www.reddit.com - site is not usable

[IlgazC]

URL: https://www.reddit.com/r/popular

Browser / Version: Firefox Mobile 57.0
Operating System: Android 5.1.1
Tested Another Browser: Yes

Problem type: Site is not usable
Description: You can't scroll subscribed topics
Steps to Reproduce:
Opening Reddit and logging in.

From webcompat.com with ❤️

[karlcow]

@IlgazC Thanks for the report. This is working on desktop with responsive design but indeed not working on the mobile device itself.
Probably something related to the handling of touch events.

On my device this is the full body which can't be scrolled.

[IlgazC]

I had to use VPN here so I suspected my rather unreliable connection. Thanks for checking and re-opening the issue. Reddit is indeed really unresponsive and it is one of the most popular sites on the Web.

[karlcow]

@softvision-oana-arbuzov @softvision-sergiulogigan can you reproduce?

[softvision-oana-arbuzov]

I was able to reproduce the issue.
Note that when using mouse scroll (while debugging) the "Subscribed" section can be scrolled.

Affected area:

<li class="OverlayMenu-row top-border">
	<button type="button" class="OverlayMenu-row-button">
		<span class="OverlayMenu-row-text with-subtext">
			<!-- react-text: 4347 -->Subscribed
			<!-- /react-text -->
			<br>
				<span class="OverlayMenu-row-text subtext">50 Communities</span>
			</span>
			<span class="OverlayMenu-row-right-item">
				<span class="icon icon-nav-arrowup"></span>
			</span>
		</button>
		<ul class="OverlayMenu-ul list-unstyled">
			<li class="OverlayMenu-row">
				<a href="/r/announcements/" class="OverlayMenu-row-button">
					<span class="OverlayMenu-row-spacer">
						<span class="OverlayMenu-icon OverlayMenu-icon-img" style="background-image: url(&quot;https://b.thumbs.redditmedia.com/iTldIIlQVSoH6SPlH9iiPZZVzFWubJU7cOM__uqSOqU.png&quot;); background-color: rgb(255, 69, 0);"></span>
					</span>
					<span class="OverlayMenu-row-text">
						<span>
							<span class="CommunityRow__rSlash">
								<!-- react-text: 4360 -->r
								<!-- /react-text -->
								<!-- react-text: 4361 -->/
								<!-- /react-text -->
							</span>
							<!-- react-text: 4362 -->announcements
							<!-- /react-text -->
						</span>
					</span>
				</a>
			</li>
<!-- not needed -->
		</ul>
	</li>

Tested with:
Browser / Version: Firefox Nightly Mobile 59.0a1 (2018-01-09), Firefox Release Mobile 57.0.4
Operating System: Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density), Nexus 5 (Android 6.0.1) - Resolution 1080 x 1920 pixels (~445 ppi pixel density)

[karlcow]

Thanks @softvision-oana-arbuzov

The menu has

.OverlayMenu {
	z-index: 30;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 48px;
	font-size: 15px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

Trying to figure out why the menu is not scrollable in Firefox. adding outline and reducing the size to see how it is positioned.

[karlcow]

The markup looks like this

<nav class="OverlayMenu m-with-top-nav">
    <ul class="OverlayMenu-ul list-unstyled">
        <li class="OverlayMenu-row bottom bottom-border">
            …
        </li>
        <li class="OverlayMenu-row"><a href="/"
                class="OverlayMenu-row-button"><span class="OverlayMenu-row-spacer"><span class="OverlayMenu-icon icon icon-rising mint-circled-xl"></span></span><span class="OverlayMenu-row-text">Popular</span></a>
        </li>
        <li class="OverlayMenu-row"><a href="/r/all"
                class="OverlayMenu-row-button">
                <span class="OverlayMenu-row-spacer">
                    <span class="OverlayMenu-icon icon icon-bar-chart orangered-circled-xl"></span>
                </span>
                <span class="OverlayMenu-row-text">All</span></a>
        </li>
        <li class="OverlayMenu-row top-border">
            …
        </li>
    </ul>
</nav>

and indeed there are strange things.

• nav is 463 pixels high
• ul is 2546 pixels high

so because the nav is all contained in the viewport it can't be scrolled indeed.

That doesn't explain why it is working in Firefox desktop (rdm with firefox android UA) and why it is working in Chrome/Safari, but it makes it clearer why it's not scrolling in this specific case.

I also noticed that when I try to scroll the menu, the content hidden in the back is trying to scroll. And if I set a

.AppMainPage {
	display: none;
}

hiding the content in the back we can scroll the menu.

[karlcow]

Let's open an issue on Bugzilla for this.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1429653