title: XAML gradient issue in UWP for some devices
body: <p>I'm using <code>Page</code> as landing screen in my app. XAML looks like this:</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot"&gt;
  
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="3*"/&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="7*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Rectangle StrokeThickness="0" Fill="#FF79D2F4" Margin="0,0,0,-10" Grid.RowSpan="2"/&gt;
  
          &lt;Rectangle StrokeThickness="0" Fill="#FF1F8CC5" Margin="0,-10,0,0" Grid.Row="2" Grid.RowSpan="2"/&gt;
  
          &lt;Image Source="ms-appx:///Assets/ViewMedia/Banners/Banner_Light_Big.jpg" Grid.Row="1" Grid.RowSpan="2"/&gt;
  
          &lt;Rectangle StrokeThickness="0" Grid.Row="2" Grid.RowSpan="2"&gt;
              &lt;Rectangle.Fill&gt;
                  &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                      &lt;GradientStop Offset="0"/&gt;
                      &lt;GradientStop Color="#7F000000" Offset="1"/&gt;
                  &lt;/LinearGradientBrush&gt;
              &lt;/Rectangle.Fill&gt;
          &lt;/Rectangle&gt;
  
      &lt;/Grid&gt;
  
      &lt;StackPanel MaxWidth="300" Margin="20,35"
                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"&gt;
  
          &lt;Button x:Name="LoginButton" x:Uid="LoginButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
                  Click="LoginButton_Click"/&gt;
  
          &lt;Button x:Name="RegisterButton" x:Uid="RegisterButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
                  Click="RegisterButton_Click"/&gt;
  
      &lt;/StackPanel&gt;
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I've got 3 devices on which I'm running the app:</p>
  
  <ul>
  <li>Microsoft Lumia 950 XL [<strong>M</strong>]</li>
  <li>Custom build PC [<strong>PC</strong>]</li>
  <li>Lenovo ThinkPad Tablet 2 [<strong>T</strong>]</li>
  </ul>
  
  <p>When running the app this page renders well on <strong>M</strong> and <strong>PC</strong> but on <strong>T</strong> <code>Gradient</code> and two <code>Button</code>s at the bottom are not rendered at all. I don't see them but I can press <code>Button</code>s and their tap event handlers will strike. But if I comment <code>Rectangle</code> with gradient everything is fine on all devices.</p>
  
  <p>This is how the app looks on <strong>T</strong> when using gradient. No buttons. And gradient is also not visible.
  <a href="https://i.stack.imgur.com/RrLtW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RrLtW.png" alt="With gradient"></a></p>
  
  <p>This is how the app looks on <strong>T</strong> without gradient. Buttons are in place.
  <a href="https://i.stack.imgur.com/wo1Oi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wo1Oi.png" alt="Without gradient"></a></p>
  
  <p>And this is how it should look running on <strong>PC</strong>. Buttons and gradient are visible.
  <a href="https://i.stack.imgur.com/symt8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/symt8.png" alt="This is how it should look"></a></p>
  
  <p>I don't see any errors in output when running the app. I don't know why this happens only on specific devices. Maybe this is kind of known issue?</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>From users feedback, I can say that this bug hits only Atom-powered devices. But I'm not sure if this is 100% true for all Atom-powered devices.</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I'd updated <strong>T</strong> with W10 from Insider Preview Fast Ring. The bug is in place. So this is not connected to OS builds.</p>
  
  <p><strong>UPDATE 3</strong></p>
  
  <p>Switching <code>Button</code>s <code>Style</code> back to normal does not solve this. So <code>Style</code> is good, it's not the cause.</p>