"Swipe" feature on PNG diff seems to show differences in partially-transparent pixels

[vchelaru]

The problem

When viewing a change in a PNG file in Github for Desktop and using the Swipe tab, partially-transparent pixels sometimes "stack", resulting in darker opacity on one side of the swipe. This can confuse users as it appears as if portions of the image have changed when they really haven't.

Release version

3.3.5 (x64)

Operating system

Windows 10 Home 22H2 build 19045.3570

Steps to reproduce the behavior

1. Create a repository
2. Commit a PNG (included here)
3. Make a change to a portion of the PNG
4. Commit the change
5. View the diff
6. Select the Swipe tab
7. Swipe left/right
8. Look closely at some of the edges of the art

Observe: Portions of the partially-transparent art "stack", increasing opacity even though no changes have been made Expected: Portions of the PNG which have not changed should not show any differences on the left/right side of the swipe.

Log files

No response

Screenshots

It is subtle, but observe the portion of the top part of the gun with the blue coloring. I recommend opening this PNG in a separate browser window, and zooming in.

To make it easier to see, I have also created a zoomed-in screenshot of the problem. The dotted line shows where the Swipe boundary is located. Both the top and bottom gun show the problem, but I only included the dotted line across the top gun so that you can see the boundary clearly on the bottom gun (where the arrow points).

Additional context

No response

[vchelaru]

I realized in my last image that I aligned the swipe boundary with the checkerboard pattern so it may appear as if the checkerboard pattern is what is making the right side darker. To show that this is not the case, here is another zoomed-in screenshot showing the boundary offset from the checkerboard pattern:

Clearly the checkerboard pattern does darken the right-side of the pink-colored gun slightly, but you can see that the swipe boundary also applies a darkening effect on the right-side of the swipe (indicated by the dotted line).

[vchelaru]

This may be related to this, as showing both images would result in the transparency "stacking" https://github.com/desktop/desktop/issues/16657

[steveward]

Thanks for the detailed report @vchelaru. I'll mark this as a bug for the team to investigate.

[Psychpsyo]

I'd agree that this is the same issue as #16657