www.labanquepostale.fr - Unable to scroll the My Accounts page

[softvision-sergiulogigan]

URL: www.labanquepostale.fr
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-05-05)
Operating System: LG G4 (Android 5.1) - 1440 x 2560 pixels (~538 ppi pixel density)
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: www.labanquepostale.fr
2. Tap the "Acces Comptes Particuliers" button.
3. Scroll the contents.

Expected Behavior:
The scroll is performed.

Actual Behavior:
The scroll is not performed.

Notes:

1. The issue is reproducible on on Firefox 52.0 Release (Mobile).
2. The issue is not reproducible on Chrome (Mobile) 57.0.2987.132.

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

sv; country: fr

From webcompat.com with ❤️

[MDTsai]

Confirmed, the design doesn't consider small screen, if I use a larger device like Nexus 6, then I can see all the popup dialog. So the elements block scrolling are:

.modal-open { // body
    overflow: hidden;
}
#nav-toolbox .sub-navbox { 
    overflow: hidden;
}

Replace with overflow-y: scroll can fix this issue. Move to needscontact.

[karlcow]

hmm. Let's rewind a bit. on a 360 x 640 pixels screen.

I click on this top nav button "Accès Comptes Particuliers"

Then I get a splash screen, which is meant to not be scrollable.

And I can choose "Continuer sur le site mobile" which gives me:

@MDTsai @softvision-sergiulogigan Are you saying that we can't fully see the splash screen because of the toolbar and the bottom bar?

So the difference here is that Chrome on mobile ignores the overflow.
This is a duplicate of (kind of) https://bugzilla.mozilla.org/show_bug.cgi?id=1336346

[karlcow]

I opened also an issue on whatwg/compat#79
And I changed a bit the title of https://bugzilla.mozilla.org/show_bug.cgi?id=1336346

[karlcow]

Also in the past we had contacts with them through
https://bugzilla.mozilla.org/show_bug.cgi?id=942739

[karlcow]

Maybe a separate bug to open there are issues with icons/font, but only on nightly. Maybe our new strict font validation.

[MDTsai]

@karlcow, I think original report from @softvision-sergiulogigan is in small screen, the content is not scrollable. In my screenshot, I can't see the third button and scroll to it either.

[softvision-sergiulogigan]

@karlcow, I think original report from @softvision-sergiulogigan is in small screen, the content is not scrollable. In my screenshot, I can't see the third button and scroll to it either.

Exactly

[karlcow]

yup. I described this in the followup issues.
It is something Firefox needs to adjust. It's too recurrent.

[bokand]

This is an issue on the page. Chrome does respect the overflow property, it just seems to apply it only when the screen is small. When I load the page on a Nexus 5X using Chrome I can't scroll it. Loading with a Nexus 6 allows scrolling. The page selectively applies the .modal-open style which adds the overflow: hidden.

[theres-waldo]

I think the previous comment suggests that this is not a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1336346 after all?

[karlcow]

but this is not what is happening for me.
@bokand @theres-waldo On the same device, Firefox and Chrome doesn't behave the same. I can't scroll with Firefox and I can scroll with Chrome.

On responsive design mode in Firefox Nightly and Chrome Canary I can't scroll whichever combination of UA.

[bokand]

Ah, it seems that it works by accident. The page applies ".modal-open" class on the body in both Firefox and Chrome. It looks like due to a bug in Chrome, we allow the URL bar to be hidden on an unscrollable page. It seems like there's some handler on resize that then removes the modal class. You can replicate the behavior in Firefox by tapping the "Acces Comptes Particuliers" button with the URL bar hidden. Firefox allows you to show the URL bar when its hidden even if there's no scrolling. Doing so will make the page scrollable. Rotating the screen will also "unlock" the page.

So I would chalk this one up to URL bar differences, rather than viewporting.

[karlcow]

Thanks @bokand

[karlcow]

So probably move this to needscontact so that they remove the overflow hidden. Because basically for smaller screens it makes it unusable and because of the Chrome behavior it seems to be working.

@bokand Do you plan to open a bug against Chrome?

[bokand]

I've opened https://crbug.com/792291, though this seems fairly low-pri and I'm pretty slammed myself so not sure when I'd be able to get to it.

[adamopenweb]

Starting outreach by sending a DM over Twitter:
https://twitter.com/LaBanquePostale

[karlcow]

The site has changed and this has been fixed.
There is another issue though. Opened #19624