Openfoodnetwork: [mobile ux] background page scroll on mobile causes placement issues with modals.

[daniellemoorhead]

Description

Background pages scrolls when a modal is open.

Expected Behavior

Background page does not scroll when modal open, and doesn't impact on positioning of modals (ie. they always display where they are supposed to)

Actual Behaviour

Background scrolls when modal is open. Impact:

• Users shut modal and are in a different position to where they were when they opened it. <- bad UX.
• Modals display in weird places as a result (see recording below).
• Modals can scroll off the screen, and then if you scroll all the way to the bottom you can't scroll the page pack up. The page is stuck.

Steps to Reproduce

See mobile video here
For the modal scrolls off the screen:

1. See the path on the video, this was on AU staging with this shop, on Safari.

For the display in weird places impact:
See mobile video here.

1. Go to a shop on production on Safari or Firefox on mobile like this shop
2. Scroll down to first product listing, open the product modal
3. Scroll in the product modal, then scroll back up and close modal
4. Open navigation hamburger, click on login
5. Login modal displays in an incorrect position
6. Refresh browser
7. Login modal displays in an even worse incorrect position

Workaround

Close login modal, then open login modal again. Refreshing the page. back buttons. But a pretty shonky experience.

Severity

bug-s1: a critical feature is broken: checkout, payments, signup, login
bug-s2: a non-critical feature is broken, no workaround
bug-s3: a feature is broken but there is a workaround
bug-s4: it's annoying, but you can use it
bug-s5: we can live with it, only a few users impacted

Your Environment

• Version used: Latest
• Browser name and version: firefox and safari
• Operating System and version (desktop or mobile): iOS (iphone SE)

Note: was able to replicate on browserstack with iPhone 8/Safari + Chrome with that staging shop. Also tested on a Galaxy 8 with Chrome and it didn't happen.

Possible Fix

[luisramos0]

Devs will assign themselves to issues if/when they see they can fix the issue.

[daniellemoorhead]

I’d assigned you so you can see it as it relates to an issue you’re working on. My intention was to chat with you about this and discuss the best way forward, thus assigning all three of us.

On 10 May 2020, at 10:20 pm, Luis Ramos [e-mail] wrote:


Devs will assign themselves to issues if they see they can fix the issue.

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[luisramos0]

ok, thanks for letting me know :+1:

[daniellemoorhead]

Here's also a recording of the scroll in action on an iPad with the new view cart look. It's just plain wrong, not good UX, needs to be fixed.

https://www.loom.com/share/a3f39032b898447ea570db8eaf711ada

[daniellemoorhead]

Note: There is a tech fix in #5480 that could be rolled out everwhere to fix this.

@Matt-Yorkley would this be an easy thing for people to do?

[Matt-Yorkley]

So it turns out this is a bug in iOS's Webkit engine. Here's a super exciting iOS bug report where people have been complaining about it for nearly 5 years: https://bugs.webkit.org/show_bug.cgi?id=153852 It turns out the fix I previously added for the cart sidebar is actually already applied to our modals. Apparently this bug is fixed in iOS 13..?

[daniellemoorhead]

Sigh. That's annoying.

Thing to note though is I always update and have been on version 13 since it was released last year. So when I saw the scroll it was using the latest version at the time. If it was fixed in 13.0.0 then it definitely occurred when I was testing the product modal (which hasn't been fixed AFAIK) and then the view cart (which you fixed).

Where to with this as a result @Matt-Yorkley ?

[Matt-Yorkley]

Does the cart sidebar correctly disable scrolling on your phone? As far as I can tell the same CSS fix is already applied to the modals...

[Matt-Yorkley]

It looks like there are some complex and fairly nasty javascript fixes that can be applied, but we would only want them to be applied on iOS and not any other devices...

[daniellemoorhead]

I’ll check on both next week.

On 14 Aug 2020, at 7:18 pm, Matt-Yorkley [e-mail] wrote:


It looks like there are some complex and fairly nasty javascript fixes that can be applied, but we would only want them to be applied on iOS and not any other devices...

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[daniellemoorhead]

Tested:

Mac + Safari/Firefox = no scrolling on product modals or login ✅
iPhone SE + Safari/Firefox = no scrolling on product modals or login ✅
iPad mini 4 + Safari = no scrolling on product modals or login ✅

So, it looks like they aren't there anymore, at least for my devices with the latest software update.

Let's close this for now and see if it raises its head again. Doubtful that it will... 🤞