Closed izarutskaya closed 1 month ago
Triggered auto assignment to @techievivek (DeployBlockerCash
), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.
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.
: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:
@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.
We think this issue might be related to the #vip-vsb
Production
oops, it's badly broken. Removing the DeployBlocker
since this is not concerned with backend.
@techievivek keep it Internal
or can we make it External
?
Job added to Upwork: https://www.upwork.com/jobs/~01c408a04e30a45b7f
Lets make this external
Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External
)
Hello, I'm from Software Mansion, an expert agency, and I'll work on this
Assigned you @jnowakow
As per this message more people can look at this issue - it's only reproducible on Safari, on other browsers it works fine
I could only reproduce in Safari, not in chrome
Demoting since the issue only happens on Safari, on a very specific flow, and isn't consistently reproducible.
Mac Safari - Tasks/Chat - Second right hand menu pane shown with a distorted UI.
How to replicate this bug?
This happens in multiple other places as well, when we navigate from one RHP to another.
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
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.
@Kicu can you please check that out?
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
Not able to reproduce
https://github.com/Expensify/App/assets/16493223/525f5513-8271-4b42-8906-ad6c0b8dff4c
@s77rt I believe it was not super reliable, have you tried couple of times?
@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
@ShridharGoel Were you able to reproduce this locally?
Yes, I'm able to get this to happen consistently on local with the steps mentioned by me.
I also tested, and:
Do we also treat this as part of this bug? seems closely related.
@Kicu seems like the RCA will be similar so I would say yes
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.
https://github.com/Expensify/App/assets/3929868/5f991e73-6eba-420b-b7af-31863d07b313
@adamgrzybowski helped a lot of with this. Thanks 🙇
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
Should I help with testing since I'm able to replicate easily on local setup?
Passing the torch to @ishpaul777 as he can reproduce the bug and can better test the solution (Slack thread).
📣 @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 📖
@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.
Reviewing
label has been removed, please complete the "BugZero Checklist".
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:
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:
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:
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
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:
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:
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:
Paid and job closed. Bump @ishpaul777 for the checklist.
will complete checklist today for sure 👍
Thanks, closing!
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:
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?
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
Issue Owner
Current Issue Owner: @jliexpensify