Bug 59565 - IsVisible changes seem to be applied out of order, causing flickering
Summary: IsVisible changes seem to be applied out of order, causing flickering
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.4.0
Hardware: Macintosh Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2017-09-18 16:33 UTC by Chase Long
Modified: 2017-09-18 22:03 UTC (History)
2 users (show)

Tags: isvisible, layout, ac
Is this bug a regression?: ---
Last known good build:

flicker-demo (222.03 KB, application/zip)
2017-09-18 16:33 UTC, Chase Long

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 for Bug 59565 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description Chase Long 2017-09-18 16:33:51 UTC
Created attachment 24801 [details]

# Summary
Run the sample after restoring NuGet packages. Click the “Change IsLoading” button repeatedly. Notice sometimes the black BoxView flickers to the top.

# Description
Generally, it seems visual tree changes resulting from bound property changes don’t happen in the same order as the property changes.

This demo includes a page with a Button that triggers a Loading screen to appear in place of the page’s “main” content. Pressing the button again hides the loading screen and makes the main content visible again. The problem is that the main content’s layout sometimes changes immediately before the main content is hidden or immediately after the main content is shown. This causes the transition between the visible view to feel unnatural.

# Repro steps
1. Click the “Change IsLoading” button
2. Notice the black BoxView flicker to the top of the page. It doesn’t happen every time, and it’s very quick, so watch carefully.
3. Repeat 1 and 2 until the problem happens. If it doesn’t happen after a few attempts, then try tapping the button repeatedly while looking for a flickering black box at the top of the page.

# Test environment
Tested on an iOS 7 iOS 10.3.1 simulator. I have also seen this on a physical Samsung Galaxy S7 and other iOS simulators, but I only tested this sample on the one simulator.

Tested on Xamarin.Forms versions
Comment 1 Chase Long 2017-09-18 16:39:05 UTC
I included a .gif file in the demo that was intended to show the issue, but I think the .gif ended up being too lossy. The flicker is only noticeable for a fraction of a second, but it looks pretty bad in person.
Comment 2 Chase Long 2017-09-18 16:42:41 UTC
Video of the problem https://drive.google.com/file/d/0B1IeLlcYceJgTWprcnV5TG90b2s/view?usp=sharing
Comment 3 Chase Long 2017-09-18 19:19:13 UTC
Thinking about this some more, it seems like the minimal reduction of this problem is a layout like this:

Layout1 IsVisible="{Binding IsLayoutVisible}"
    View IsVisible="{Binding IsViewVisible}"

If IsLayoutVisible and IsViewVisible are set to false "at the same time", then Layout1 should be updated first, since it's higher up the visual tree. Instead, sometimes StackLayout's layout is updated first, which causes the flickering effect immediately before Layout1 disappears.
Comment 4 Chase Long 2017-09-18 22:03:14 UTC
I implemented a workaround in my application by swapping out the contents of a ContentView, rather than selectively hiding/showing elements. Basically I had several logical views that shared some elements, and now I have separate view files for each logical view. The "shared" elements are duplicated in XAML now, but the result is easier to understand, and it doesn't have the flickering problem. Basically my view model exposes a "ViewToDisplay" property. That property is bound to a ContentView with a converter that maps the ViewToDisplay string to a view factory, calls the factory, and returns the view.