WebView rendering when not Visible

Hi All,

I have a WebView that is not visible when the page is displayed. Visibility is set when tapping a StackLayout gesture. The WebView source is using a HtmlWebViewSource converter. When the WebView becomes visible, the rendered HTML is missing until you click on the space it should be and then it appears. However the rendered HTML is not filling the width of the space.

The purpose of this is to have the WebView hidden until the StackLayout is clicked and then it appears underneath.

XAML Code of the StackLayout;

<StackLayout Padding="5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
   <StackLayout Orientation="Horizontal" VerticalOptions="Center" HeightRequest="20">
      <StackLayout.GestureRecognizers>
         <TapGestureRecognizer Tapped="CashbackGestureRecognizer_OnTapped"></TapGestureRecognizer>
      </StackLayout.GestureRecognizers>
      <Image Source="pricepal_icon_check_yes_circle.png" Aspect="AspectFit" HorizontalOptions="Start"></Image>
      <Label Text="Cashback Tips" FontSize="{x:Static helpers:Settings.TextNavTitle}" HorizontalOptions="StartAndExpand"></Label>
      <Image x:Name="CashbackArrowImage" Source="pricepal_icon_arrow_down.png" Aspect="AspectFit" HorizontalOptions="End"></Image>
   </StackLayout>
   <WebView IsVisible="{Binding ShowCashbackLayout}" HeightRequest="100" Source="{Binding CashbackHtml, Converter={StaticResource HtmlSourceCoverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></WebView>
</StackLayout>

Any hints/tips would be appreciated on how to make this behave correctly.
Thanks

I've attached a couple of screen shots that show the odd behavior and a screen shot with how it appears when IsVisible is set to true when the page loads.

1 - Page loaded when IsVisible is false

2 - When the tap gesture is clicked, notice the WebView is blank

3 - This is what appears when clicking on that empty space

4 - How the page appears when IsVisible is true on page load