kbecciv commented 2 years ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Go to URL https://staging.new.expensify.com/
Click on the green + button
Click on Create Group
Start the group creation flow and add 8 participants.
Scroll the page

Expected Result:

The page should move and scroll when adding 8 members

Actual Result:

Page freezes when selecting 8 group members and unable to scroll the page

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web
iOS ✅
Android
Desktop App
Mobile Web

Version Number: 1.1.82.5

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/178056852-7b0e4aee-ee0a-4fdd-a3d1-e1b23c813198.mp4

https://user-images.githubusercontent.com/93399543/178056853-ffb30259-015a-45cf-8661-186c0b52a806.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

rushatgabhane commented 1 year ago

@hellohublot could you please explain why position absolute would fix the bug for safari? Why isn't it required for other browsers?

Anyway, I don't think we'll move ahead with a solution that requires us to detect browsers

rushatgabhane commented 1 year ago

Hi @hellohublot 👋 Are you on expensify's opensource slack channel yet? If yes, what's your handle?

marcaaron commented 1 year ago

I'm kinda lost on this issue. Is it only affecting Safari on older iOS versions? I was not able to repro this at all on iOS 15 version of Safari.

hellohublot commented 1 year ago

Q & A

Are you on expensify's opensource slack channel yet?

I have sent the application email to contributors@expensify.com, my username is hublot@aliyun.com

How to reproduce

You can slide the list of this page to the top, then continue to drag down, and then repeatedly drag up and down, Or slide the list of this page to the bottom, continue to drag up, and then repeatedly drag up and down

Why it happened

SectionList.overflow.scroll does not support bounce, so this event cannot be accepted, and this event will be sent to Document, because Document always supports bounce

Can it be reproduced on iOS 15+

Document bounce has been changed to support pull-down refresh in this version, so this problem cannot be reproduced. I can’t borrow a mobile phone with iOS 15+ system. Maybe You can try to slide the list to the bottom and then drag it up

Can we intercept this event and hand it over to SectionList?

I have found many ways to solve this gesture penetration, but none of them work Include the following.

touchmove.stopPropagation
document.body.position.fixed
overscroll-behavior: contain
webkit-overflow-scrolling: touch
replace SectionList to View

Finally, I guess if SectionList.overflow.scroll can support bounce, it must be inconsistent with w3c, because other web cores do not support bounce So I ended up giving up on intercepting the event

My solution

Although we can't intercept the Document.scroll.bounce event, we can give the user some visual feedback instead of the page gesture being frozen

First solution addEventListener('scroll')

We can listen the offset change of Document.scroll.bounce, and then let the entire page of NewGroupChat scroll together

Second solution position: 'absolute'

This link can explain what is the difference between 'absolute' and fixed, https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning?source=post_page Simply put, absolute will not break away from the document flow, and the pop-up window will slide along with the document flow, but fixed cannot slide along with the document flow

So if we don't want the first solution, we can change NewGroupPage to absolute, it will automatically scroll along with the document flow, so we don't have to listen to offset

Can we cancel the position condition and set it all to absolute?

I don't think so, because only MobileSafari supports bounce, it is special so we also treat it specially,

If we really need to cancel the position condition, set them all to absolute.

The code I want to debug conflicts with this PR https://github.com/Expensify/App/pull/12366. This PR caused some bugs in https://staging.new.expensify.com/, you can use MobileSafari to go reproduce those bugs, such as ProfileScreen and SearchScreen and more, so I want to wait until they are fixed, and I also hope they can continue to use cardStyle.position, then I can continue to debug and answer this question

Thanks !

trjExpensify commented 1 year ago

I have sent the application email to contributors@expensify.com, my username is hublot@aliyun.com

Hey @hellohublot, that email hasn't been received on our side. Can you resend it and include a link to your Upwork profile please. After which, we can get you added to Slack. Thanks!