[HOLD for payment 2024-01-22] [$500] iOS - Attachment - The image shakes when you zoom in and back to the original size

[kbecciv]

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.4.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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in
3. Take and upload a photo to any conversations
4. Open the preview of the photo
5. Zoom in a little bit
6. Zoom out a little bit

Expected Result:

The image should zoom smoothly without shaking.

Actual Result:

The image shakes when you zoom in a little and when you zoom back to the original size.

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

Bug6293079_1701173093223.Jfaf8028.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a3b2c6d67f8d66f1
• Upwork Job ID: 1729484843894013952
• Last Price Increase: 2023-12-05

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[sakluger]

I agree that this is an annoying bug that we should solve. Let's see if any contributors can figure out what's going on and how to fix it.

[ikevin127]

Debugging observations:

• in order to debug this one needs to be able to run the iOS app on a real device
• the issue's RC comes from the ImageTransformer.js implementation of pan / pinch gestures which are both active simultaneously and the conflict between the 2 is not handled
• it seems like while pinch zooming, when 1 of the 2 pointers (fingers) is lifted up, the image jumps and centers to the anchor of the 1 remaining pointer - when this happens fast like in the issue's video, we get that image shake

Considering all these findings, I was still not able to find a fix yet.

Maybe @chrispader can chime in with some pointers as to a possible fix for this issue since he's the author of ImageTransformer's implementation and I am sure he's more familiar with gestures and the way they work together.

[chrispader]

I'm going to look into this tmrw! I'm currently working on improving the ImageView/Lightbox component, so i can fix this in the other PR:

#31308

[sakluger]

Thanks @chrispader! Please let us know once you confirm whether you'll be able to fix this issue in that PR.

[melvin-bot]

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

[sakluger]

@chrispader any updates?

[chrispader]

@kbecciv i'm not sure if this has coincidentally been fixed in this PR or if i'm just unable to reproduce anymore. I know for sure that i've also experienced this bug before, but just can't reproduce with the current changes.

Could you test this and let me know please? :)

#31308

[melvin-bot]

@sakluger, @mollfpr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sakluger]

That would be great if this was resolved in another update already! @kbecciv please give it a try and let us know if you can still reproduce, thanks!

[chrispader]

This problem was fixed here: #33755

I also created another PR which improves the MultiGestureCanvas code by a lot. #33756

[mollfpr]

@sakluger Let's assign this issue to @chrispader, and I'll review and test the PR.

[melvin-bot]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mountiny]

@mollfpr @chrispader what are the next steps on this one?

[chrispader]

@mollfpr @chrispader what are the next steps on this one?

@mountiny the PR is ready for review and merge! :) #33755

[mountiny]

Thanks!

[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.24-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Attachment - The image shakes when you zoom in and back to the original size #33755

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

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

• @chrispader does not require payment (Contractor)
• @mollfpr requires payment (Needs manual offer from BZ)

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

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

[sakluger]

@mollfpr can you please complete the BZ checklist? Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @chrispader is from an agency-contributor and not due payment
• C+: @mollfpr payable $500 via Manual Request

BugZero Checklist (@sakluger)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1729484843894013952/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[sakluger]

@mollfpr friendly bump on the BZ checklist so I can post the payment summary and close out the issue. Thanks!

[mollfpr]

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] 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:

I couldn't find the offending PR.

[@mollfpr] 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:

The regression step should be good.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] 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.

1. Go to a report with image attachments
2. Open an image
3. Pinch to zoom in and slightly move both fingers in some direction (top/right/bottom/left)
4. Release pinch gesture
5. Verify the image is not flickers/shakes
6. 👍 or 👎

[sakluger]

Thanks! Updated the payment summary here: #32110 (comment). @mollfpr feel free to submit the manual request for payment.

[melvin-bot]

@sakluger @mountiny Be sure to fill out the Contact List!

[JmillsExpensify]

$500 payment for @mollfpr based on payment summary.