App: [HOLD for payment 2023-09-06] [$1000] Android/MWeb - Inconsistency bug: Android chrome does not allow vertical scroll on multiline horizontal scrollable code block
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:
- Open the app
- Open any report
- Send multiline horizontal scrollable code block eg:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Test
Test
1
2
3
4
5
- From android chrome, try to scroll vertically over that code block, observe that it does not allow
- From android app, try to scroll vertically over that code block and observe that it allows to scroll up to previous messages
Expected Result:
App should not block scroll vertically to previous messages when scrolled over code block as it allows on android app
Actual Result:
App blocks scroll vertically to previous messages when scrolled over code block on android chrome
Workaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
Version Number: 1.3.49-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation
https://github.com/Expensify/App/assets/43995119/10e4e3c2-4402-4120-97dd-74d3456627f8
https://github.com/Expensify/App/assets/43995119/88ef4825-33ea-499c-a317-c26fb31f8055
Expensify/Expensify Issue URL: Issue reported by: @dhanashree-sawant Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690949529360049
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~015c752c085d8a6cf1
- Upwork Job ID: 1689581173954527232
- Last Price Increase: 2023-08-10
- Automatic offers:
- aimane-chnaif | Reviewer | 26245611
- akinwale | Contributor | 26245613
- dhanashree-sawant | Reporter | 26245615
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 46 (31 by maintainers)
Ok sorry for the back and forth - we will payout the bonus here! TY for your help here!
Sorry, was busy at a conference! Unfortunately, we’ve decided that we’ll be adhering to the timeline unless specifically impacted by our own internal delays. I hope you all understand, and appreciate your time and amazing work! Payments inbound
Timeline analysis:
There’s 28 min delay for bonus timeline but hope it’s still eligible as there were no changes requested after C+ approval.
Proposal
Please re-state the problem that we are trying to solve in this issue.
In Android Chrome, when trying to vertically scroll the report starting the touch input within a code block, it does not scroll. This is not consistent with the behaviour on Android native.
What is the root cause of that problem?
The overscroll behaviour CSS style for the containing ScrollView in the
BasePreRenderercomponent is set to none.https://github.com/Expensify/App/blob/21146e534492fc21811b5bac0718e0f1e8ffbfd4/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js#L37
What changes do you think we should make in order to solve the problem?
Set the overscroll behaviour to auto for the containing ScrollView in
BasePreRenderer. We can add a new style for this in src/styles/utilities.js:and then update the ScrollView’s style:
style={[styles.mv2, styles.overscrollBehaviorAuto]}If necessary, we can also apply the styles specifically to the scroll axes using
overscrollBehaviorX: 'none'andoverscrollBehaviorY: 'auto'respectively. Thus, the ScrollView style will be:style={[styles.mv2, styles.overscrollBehaviorXNone, styles.overscrollBehaviorYAuto]}. However, I have not observed any adverse effects from using justoverscrollBehavior: 'auto'.What alternative solutions did you explore? (Optional)
None.