[BUG] When the image width is below a certain size, a black background appears

[jackforesightmobile]

Describe the bug I am trying to use a custom painter to draw translucent shapes over the top of a PhotoView widget. This works fine when the image is above a certain width, this width is different for every image, but I tested with 2 images and the value was roughly 1.15 times the width for these 2 images. When the image width is below this value, the translucent shapes get a black background rather than being able to see the image through these shapes. You can see what I mean in the 2 images below.

This is the expected behaviour:

And this is the behaviour when the image width goes below a certain size:

This issue seems to have been introduced with the latest beta version of Flutter as this hasn't always happened. Although when I use a regular Container with a DecorationImage the issue doesn't happen so it seems to be this plugin that is breaking it.

Which versions of Flutter/Photo View, and which browser / OS are affected by this issue? Did this work in previous versions of Photo View?

Google Chrome: 87.0.4280.88

photo_view: 0.10.3

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.7 19H15 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3)
[✓] VS Code (version 1.50.1)
[✓] Connected device (2 available)

• No issues found!```

[renancaraujo]

This bug affects which platforms?

Do you have a step by step of how to reproduce it?

When the image width is below this value,

What do you mean by "value"?

[jackforesightmobile]

Hi, this is for Flutter Web.

By value, I mean the width at which the shape becomes translucent or not. After looking into it a bit more, the shape stops being translucent when the rendered image is smaller than its original width.

So the image in that example has an original width is 1281px and when the size of the image in the browser goes below 1281px the shape stops being translucent.

[jackforesightmobile]

@renancaraujo do you have any more thoughts on this issue?

[renancaraujo]

Since this is for flutter web, I couldn't have thought much about this. When trying to reproduce it doesn't happen for macOS, android, and iOS. Since it seems to be a framework issue, I will ask you to report this on flutters repository.

This issue shall be kept open as a "known issue".

Sorry for that.