Bug 46380 - Xamarin.Forms Opacity incorrectly blends against black
Summary: Xamarin.Forms Opacity incorrectly blends against black
Status: RESOLVED ANSWERED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.3
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Paul DiPietro [MSFT]
URL:
Depends on:
Blocks:
 
Reported: 2016-11-03 15:27 UTC by Florian
Modified: 2017-06-19 22:15 UTC (History)
6 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:


Attachments
opacity bug (18.33 KB, image/png)
2016-11-03 15:27 UTC, Florian
Details
Sample project to reproduce the bug (8.01 KB, application/x-zip-compressed)
2016-11-05 09:19 UTC, Florian
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED ANSWERED

Description Florian 2016-11-03 15:27:39 UTC
Created attachment 18319 [details]
opacity bug

The opacity blending is not working correctly in Android. For an opacity value between 0 and 1 (as in a FadeIn-Animation) it blends against a black background (and not as in the below case a white background). The same issue exists when setting the opacity directly to a value or using the FadeIn-animation.

As in the attachment, the background is white, the view which I fade in has a yellow background, the error is visible for the above opacity of 0.5 where it clearly blends against black and not white. For an opacity value of 0.01 the view is completely black.

I've tested this with Xamarin.Forms 2.3.2.127 and 2.3.3.163-pre3, Android Emulator API 19 and 22, all having the same issue. However in Android API 17 and 23 it works correctly. There's a similar issue posted on the Xamarin forums: https://forums.xamarin.com/discussion/55727/opacity-incorrectly-blends-with-black

**MainFormsActivity.cs**

    [Activity(
        Label = "Test", 
        MainLauncher = true,
        ScreenOrientation = ScreenOrientation.Portrait,
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainFormsActivity : FormsApplicationActivity 
    {
        protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);

            LoadApplication(new App()); 
		}
    }

**App.cs**

	public class App : Application
	{
		public App ()
		{
            var view = new TestView ();

            var layout = new RelativeLayout { Margin = new Thickness(0, 0, 0, 100) };
            layout.Children.Add(view, Constraint.Constant(0), Constraint.Constant(0), Constraint.RelativeToParent(parent => parent.Width), Constraint.RelativeToParent(parent => parent.Height));

            MainPage = new ContentPage { BackgroundColor = Color.White, Content = layout };
        }
    }

**TestView.cs**

    public class TestView : ContentView
    {
        public TestView()
        {
            BackgroundColor = Color.Yellow;

            var btn = new Button {Text = "Fade", Margin = new Thickness(0, 300, 0, 0)};
            btn.Clicked += OnDone;

            Content = btn;
        }
        
        private void OnDone(object sender, EventArgs e)
        {
            Opacity = 0f;

            this.FadeTo ( 1, 1000 );
        }
    }
Comment 1 adrianknight89 2016-11-04 18:41:30 UTC
I can't duplicate this issue on AppCompat with 2.3.3-pre4. I tried setting opacity to 0.01f as well as changing fade duration to 60 seconds.
Comment 2 Florian 2016-11-05 09:19:03 UTC
Created attachment 18349 [details]
Sample project to reproduce the bug

I added a project to reproduce the bug. I tested this in Visual Studio 2015, 2.3.3-pre4 in the Visual Studio Emulator (5" Lollipop (5.1.1) XXHDPI Phone (Android 5.1 - API 22). It still happens.
Comment 3 adrianknight89 2016-11-05 18:15:13 UTC
Is this only happening for Pages or any UI element? 

I could sort of see a darkening of the screen, but I can't tell if that's what alpha looks to the eye when blended with the original color.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
Comment 4 Florian 2016-11-06 07:58:15 UTC
I can't figure out rules for this to appear. In the sample case it is for a ContentView, if that is replaced by a Label the opacity is working correctly. But I've seen the same issue when fading a Label in a project before (I think it was inside a RelativeLayout the Label having a Transparent background color). In the Xamarin forums post from above it happens for an ImageView.

The darkening is incorrect, instead it should whiten up the screen. You can switch to iOS emulator or API 17 or API 23 too see how it should look like correctly. You can set the Opacity to 0.1 in the TestView constructor, this will set it to be really dark, but it should be close to white, cause it should blend against the white background, when you set it to 0 it will be white which is correct, but as the opacity is slightly above 0 it turns black immediately - incorrect.
Comment 5 Florian 2017-01-30 15:57:59 UTC
Is something happening here?
Comment 6 Paul DiPietro [MSFT] 2017-02-28 21:29:14 UTC
I'm not noticing a difference between API 19 and API 23 emulators against the nightly but I don't want to discount the possibility of something going on here. Do you notice any differences between emulators/devices running the same API?
Comment 7 Florian 2017-04-20 10:32:09 UTC
I think the problem might only occur in the emulator, at least we didn't get any bad customer feedback for a running app, which has that problem.
Comment 8 Jimmy [MSFT] 2017-06-19 22:15:45 UTC
Based on the comments here and on forum thread, so far this issue has only been seen on certain emulator but not any real world devices. Given that, I will go ahead and close this issue. However feel free to re-open the report if this issue is reproduced on a device and provide the device information and Forms version. Thanks!