[HOLD for payment 2024-05-22] [$250] Login - mweb - Login screen gets off center after selecting saved credentials

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.63-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: n/a
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

precondition: user has at least 3 saved credentials

1. Go to https://staging.new.expensify.com/

2. Tap the email field

3. Dismiss saved password modal

4. Tap the email field again

5. Swipe the credentials and select the password icon

6. Scroll down and select the 3rd saved credential

Expected Result:

The login screen is fully visible

Actual Result:

The login screen gets off center and moves to the left

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6454281_1713475501494.video_2024-04-18_17-23-00.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01767f654b3e4ea3af
• Upwork Job ID: 1781356871059267584
• Last Price Increase: 2024-05-03
• Automatic offers:
• fedirjh | Reviewer | 0
• samilabud | Contributor | 0

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[kavimuru]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[kavimuru]

This bug might be related to #vip-vsb

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01767f654b3e4ea3af

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[melvin-bot]

@puneetlath, @fedirjh Whoops! This issue is 2 days overdue. Let's get this updated quick!

[charles-liang]

@kavimuru can you provide your android and chrome version? I tried to replicate it, but it didn't occur.
I run in

Chrome 113
Android 14

[puneetlath]

Are you able to repro @fedirjh?

[fedirjh]

Are you able to repro @fedirjh?

@puneetlath I can reproduce with these steps:

1. Go to https://staging.new.expensify.com/
2. Tap the email field
3. Enter a very long email
4. Double-tap the email to select it

@kavimuru Can you test with these steps and see if you can reproduce the same issue?

[charles-liang]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Login - mweb - Login screen gets off center after selecting saved credentials

What is the root cause of that problem?

When the SVG uses absolute positioning and is either large in size or positioned such that part of it extends outside the viewport, this might lead to the appearance of scrollbars because the browser needs to provide a way for users to access and view the overflowed part.

If switch to fixed positioning, the SVG will be positioned relative to the viewport and will be independent of the rest of the document's layout or scroll. Therefore, the SVG's size or position will not affect the document's scroll behavior.

App/src/pages/signin/SignInPageLayout/index.tsx

Line 148 in 915a1b6

<View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>

What changes do you th

ink we should make in order to solve the problem?

change style from absolute to fixed

Before:

After:

What alternative solutions did you explore? (Optional)

N/A

[samilabud]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Login - mweb - Login screen gets off center when selecting all text content with dblclick

What is the root cause of that problem?

We are using an overflowHidden to wrap the SignInPageContent (The overflow: hidden CSS property on a parent component can clip any content that overflows its boundaries. This can affect how child components (like a TextInput) are displayed, especially when they extend beyond the parent's visible area due to text selection handles), when we select all the input content there is a moment where the magnfier (in android) try to adjust to the space available and we get the error / weird behavior.

What changes do you think we should make in order to solve the problem?

We can remove the overflowHidden for the rest of navigators/devices and let it in Safari when mobile (due the bug there is because the magnifier behavior) in the View component inside SignInPageLayout:
<View style={[ styles.flex1, styles.flexColumn, **Browser.isMobileSafari() ? styles.overflowHidden : {},** StyleUtils.getMinimumHeight(backgroundImageHeight), StyleUtils.getSignInBgStyles(theme), ]} >

Before changes:

Before.changes.mov

After changes with previous bug fix tested:

After.changes.-.mobile.safari.and.mobile.chrome.mp4

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[fedirjh]

@charles-liang Your root cause analysis is not clear to me. It does not explain why this issue occurs when the input text is long.

[fedirjh]

@samilabud It seems overflowHidden style was implemented in this PR #25457 to fix another issue (#24328). Is it safe to remove this style? Won’t the old bug reappear?

[samilabud]

@samilabud It seems overflowHidden style was implemented in this PR #25457 to fix another issue (#24328). Is it safe to remove this style? Won’t the old bug reappear?

Hi @fedirjh, you were right, I have updated my proposal, I have included new video with evidence, here below what was happening with my previous proposal (was working for mobile chrome only):

With.previous.proposal.-.mobile.safari.and.mobile.chrome.mp4

[charles-liang]

@fedirjh

@charles-liang Your root cause analysis is not clear to me. It does not explain why this issue occurs when the input text is long.

I understand that removing overflow: hidden might cause other issues, which is why I didn’t propose it.
Since position: absolute can expand the page and make this section scrollable, it’s only because overflow: hidden hides the scrollbar that users can't scroll, but it doesn’t prevent scrolling programmatically.
On Android mobile web, when a toolbar pops up, the system will position the menu to the right of the last character of the text if the right side can scroll, which would cause the page to scroll. If it can't scroll, it will shift to the left. That's why this issue only appears on Android’s mobile web.

The longtext does not need to be very long; it only needs to exceed the length of the input box by a few characters, depending on the width of the whitespace to the right of the input box.

On the other hand, position: fixed doesn’t expand the page and prevents scrolling.

If this makes it clearer for you, I will update my proposal.

[puneetlath]

@fedirjh how's this going?

[fedirjh]

@charles-liang Thanks for the update. However, I am leaning toward @samilabud solution. I believe that removing the style causing the issue (overflowHidden) and applying it selectively to mWeb Safari would be the most effective approach.

[fedirjh]

Let's proceed with @samilabud's Proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[samilabud]

Thanks @fedirjh, I have created the PR, just waiting for the upwork offer.

Anything else I'm at your service!

[puneetlath]

Sorry, just for my understanding, does Safari treat overflow:hidden different than Chrome?

[samilabud]

Sorry, just for my understanding, does Safari treat overflow:hidden different than Chrome?

Not really, the problem with Safari is that it has a magnifying glass that affects the CSS and in this case makes the content move as if it had a scroll (even with the overflow hidden).

[melvin-bot]

📣 @fedirjh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @samilabud 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.73-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Login screen gets off center 40559 #41669

If no regressions arise, payment will be issued on 2024-05-22. 🎊

For reference, here are some details about the assignees on this issue:

• @samilabud requires payment automatic offer (Contributor)
• @fedirjh requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@fedirjh] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[fedirjh]

BugZero Checklist:

• Link to the PR: Fix able to scroll horizontally out of screen width on sign in page #25457
• Link to comment: Fix able to scroll horizontally out of screen width on sign in page #25457 (comment)
• Link to discussion: N/A Nothing to add to the checklist
• Determine if we should create a regression test for this bug: Y

Regression Test Proposal

1. Go to https://staging.new.expensify.com/ on mobile web
2. Tap the email field
3. Enter a very long email
4. Double-tap the email to select it or long press to use the magnifier
5. Try to scroll (swipe) to the left or right
6. Verify content is static and can't be moved to the sides

• Do we agree 👍 or 👎

[puneetlath]

Regression test update here: https://github.com/Expensify/Expensify/issues/398940

Everyone has been paid. Thanks y'all!