[CHECKLIST - ISHPAUL] [$250] Mac Safari - Tasks/Chat - Second right hand menu pane RHP shown severely cut compared to prod

[izarutskaya]

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

---

Version Number: 9.0.3-6 Reproducible in staging?: Y Reproducible in production?: N Email or phone of affected tester (no customers): gatantm+82@gmail.com Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

1. Go to any chat
2. Click on the plus icon > Assign task
3. Add any Title > next
4. Second flow click on the chat header > Share

Expected Result:

The second page of the opened RHP is shown without issues

Actual Result:

The second page of the opened RHP either when assigning a task or Sharing a channel is shown cut. Sometimes the button back is hard to reach as well

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/115492554/7163f8c9-558e-42ed-9d9b-8b7d896140f4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c408a04e30a45b7f
• Upwork Job ID: 1808446874734237891
• Last Price Increase: 2024-07-03
• Automatic offers:
• ishpaul777 | Contributor | 102994015

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot[bot]]

Triggered auto assignment to @techievivek (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

Triggered auto assignment to @jliexpensify (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.

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@jliexpensify 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.

[izarutskaya]

We think this issue might be related to the #vip-vsb

[izarutskaya]

Production

[techievivek]

oops, it's badly broken. Removing the DeployBlocker since this is not concerned with backend.

[jliexpensify]

@techievivek keep it Internal or can we make it External?

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01c408a04e30a45b7f

[mountiny]

Lets make this external

[melvin-bot[bot]]

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

[jnowakow]

Hello, I'm from Software Mansion, an expert agency, and I'll work on this

[jliexpensify]

Assigned you @jnowakow

[jnowakow]

As per this message more people can look at this issue - it's only reproducible on Safari, on other browsers it works fine

[mountiny]

I could only reproduce in Safari, not in chrome

[jasperhuangg]

Demoting since the issue only happens on Safari, on a very specific flow, and isn't consistently reproducible.

[ShridharGoel]

Proposal

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

Mac Safari - Tasks/Chat - Second right hand menu pane shown with a distorted UI.

How to replicate this bug?

• Go to the new task page in Safari.
• Enter title.
• Click the enter key (This is important - it seems to happen only on enter click).
• Notice the next page.

This happens in multiple other places as well, when we navigate from one RHP to another.

What is the root cause of that problem?

The concurrent mode was enabled in https://github.com/Expensify/App/pull/42592, but it is not stable in Safari browser.

Example of an older issue: https://github.com/facebook/react/issues/22459

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

As a temp fix, we should disable concurrent mode for Safari:

Update platformSetup/index.website.tsx:

export default function () {
    const appConfig = {
        rootTag: document.getElementById('root'),
    };

    if (Browser.isSafari()) {
        appConfig.mode = 'legacy';
    }

    AppRegistry.runApplication(Config.APP_NAME, appConfig);

    // When app loads, get current version (production only)
    if (Config.IS_IN_PRODUCTION) {
        checkForUpdates(webUpdater());
    }

    // Start current date updater
    DateUtils.startCurrentDateUpdater();
}

This would set the mode to legacy if the browser is Safari.

[mountiny]

@Kicu can you please check that out?

[mountiny]

I am not 100% if just disabling the mode is the right path forwards, can we help fix this issue in safari with some patch and try to fix it upstream? I worry that if we would not care, we might leave the safari disabled for a long time

[s77rt]

Not able to reproduce

https://github.com/Expensify/App/assets/16493223/525f5513-8271-4b42-8906-ad6c0b8dff4c

[mountiny]

@s77rt I believe it was not super reliable, have you tried couple of times?

[s77rt]

@mountiny Tested on staging and I'm able to reproduce (all the time) but not on main

https://github.com/Expensify/App/assets/16493223/60990a61-17ee-4c38-b653-93adb5b677d8

The bug is probably not fixed yet. But it does seem harder to reproduce locally

[s77rt]

@ShridharGoel Were you able to reproduce this locally?

[ShridharGoel]

Yes, I'm able to get this to happen consistently on local with the steps mentioned by me.

[Kicu]

I also tested, and:

• initially I was able to reproduce on "Assign Task", but then after I got the correct behavior once I cannot reproduce anymore. Tried refreshing the page multiple times and it looks good every time
• however when doing a similar pattern from Search, that is: click on row, see the report in RHP and click on its header to get another RHP open I get this:

Do we also treat this as part of this bug? seems closely related.

[mountiny]

@Kicu seems like the RCA will be similar so I would say yes

[Kicu]

Both the original bug with Task RHP page and also my screenshot ☝️ where ReportDetails looks bad seem to have the same source. The source is using specific interpolators from base Animated from react-native or writing our own interpolators.

If we take a look where the RHP Navigator is defined: https://github.com/Expensify/App/blob/main/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx#L40 we see that there are options passed to it, and within them the specific interpolator to be used, defined here: https://github.com/Expensify/App/blob/main/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts#L16 If I either comment out this interpolator or change to some other animation the bug does not happen.

This is the direct link to the interpolator in question: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx#L14

I tried to do some logging from inside react-navigation and Animated but found nothing. What I also found is that sometimes if we trigger the bug, then moving the browser window or changing focus fixes it. This leads me to believe that perhaps there is some problem in Safari related to painting, updating screen etc. Perhaps the internal Animated/progress.interpolate implementation has a bug that did not surface before 🤷

I guess the only 2 things to do that I can come up right now is to: A. disable/remove concurrent mode B. somehow disable this specific animation (see video 1)

Perhaps someone with more experience with animations could dig deeper and come up with something better.

vid1: interpolate animation disabled for RHP transition

https://github.com/Expensify/App/assets/3929868/5f991e73-6eba-420b-b7af-31863d07b313

[Kicu]

@adamgrzybowski helped a lot of with this. Thanks 🙇

[Kicu]

I pushed a somewhat dirty hotfix here: https://github.com/Expensify/App/pull/44840

We could probably write the same code in a nicer way, but for now we can at least test since this is a deploy blocker

[ShridharGoel]

Should I help with testing since I'm able to replicate easily on local setup?

[ShridharGoel]

https://github.com/Expensify/App/pull/44840#issuecomment-2209272361

[s77rt]

Passing the torch to @ishpaul777 as he can reproduce the bug and can better test the solution (Slack thread).

[melvin-bot[bot]]

📣 @ishpaul777 🎉 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 📖

[Kicu]

@mountiny I left some comments on my PR about what to do next since I cannot reproduce anymore, also asked a few folks in SWM to test how this behaves for them. I leave the decisions what to do next to you.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/44840

If no regressions arise, payment will be issued on 2024-07-17. :confetti_ball:

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

• @jnowakow does not require payment (Contractor)
• @ishpaul777 requires payment automatic offer (Contributor)

[melvin-bot[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:

• [ ] [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [ ] [@ishpaul777] 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:
• [ ] [@ishpaul777] 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:
• [ ] [@ishpaul777] Determine if we should create a regression test for this bug.
• [ ] [@ishpaul777] 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.
• [ ] [@jliexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[BrtqKr]

Hey, we've noticed that this issue happens only on the most recent versions of safari (17.x.x). I've created a react-navigation issue. We'll try to research it at the library level, so this might help to resolve this, but atm I'd suggest keeping the workaround @Kicu applied.

https://github.com/react-navigation/react-navigation/issues/12058

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/44840

If no regressions arise, payment will be issued on 2024-07-22. :confetti_ball:

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

• @jnowakow does not require payment (Contractor)
• @ishpaul777 requires payment automatic offer (Contributor)

[melvin-bot[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:

• [ ] [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [ ] [@ishpaul777] 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:
• [ ] [@ishpaul777] 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:
• [ ] [@ishpaul777] Determine if we should create a regression test for this bug.
• [ ] [@ishpaul777] 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.
• [ ] [@jliexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[jliexpensify]

Bump @ishpaul777 for the checklist!

Payment Summary

• C+: @ishpaul777 $250

Upwork job

[jliexpensify]

Paid and job closed. Bump @ishpaul777 for the checklist.

[ishpaul777]

will complete checklist today for sure 👍

[ishpaul777]

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/pull/42592
• [@ishpaul777] 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: The bug is upstream and there was no specific change in the PR that triggered it
• [@ishpaul777] 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: Not required
• [@ishpaul777] Determine if we should create a regression test for this bug. Not required
• [@ishpaul777] 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. - N/A

[jliexpensify]

Thanks, closing!