Bug 59927 - ScrollView height not calculated properly on iOS 11
Summary: ScrollView height not calculated properly on iOS 11
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: iOS (show other bugs)
Version: 2.4.0
Hardware: Macintosh Mac OS
: Normal normal
Target Milestone: ---
Assignee: Rui Marinho
URL:
Depends on:
Blocks:
 
Reported: 2017-10-03 16:00 UTC by Austin Grigg
Modified: 2018-02-03 16:36 UTC (History)
10 users (show)

See Also:
Tags: scrollview, ios 11, safe area, ac, fr
Is this bug a regression?: ---
Last known good build:


Attachments
Scroll view height issue (80.43 KB, image/jpeg)
2017-10-03 16:00 UTC, Austin Grigg
Details
Bug screenshot (177.46 KB, image/jpeg)
2018-02-03 16:36 UTC, Francois Kreutz
Details

Description Austin Grigg 2017-10-03 16:00:47 UTC
Created attachment 25076 [details]
Scroll view height issue

I have a Xamarin Forms app using version 2.4 (this was also happening though on 2.3.4) with a ContentPage embedded in a NavigationPage with the Navigation bar hidden. Inside the ContentPage is a single ScrollView with a StayLayout within it. On iOS 10 and before the ScrollView's content height would be calculated currently and in portrait mode there would be no scrolling because my content is not big enough. In landscape it would allow for scrolling as the content is larger than the height of the screen. Now, in iOS 11, there is extra space at the bottom of the ScrollView so a button I have pinned to the bottom is pushed under the edge of the screen. It looks like the extra space is the same as the height of the status bar, but that may be coincidental. 

Here is the XAML for this page:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="MyProj.Common.UI.Pages.HomePage" 
    xmlns:local="clr-namespace:MyProj.Common" 
    xmlns:i18n="clr-namespace:MyProj.Common.Locale;assembly=MyProj.Common"
    xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
	<ContentPage.Content>
		<AbsoluteLayout>
			<ScrollView x:Name="HomeScrollView" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
				<StackLayout Orientation="Vertical" Padding="20,70,20,20" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="15">
					<StackLayout Orientation="Vertical" Padding="50,0,50,25">
                        <ffimageloading:CachedImage HorizontalOptions="Center" Source = "Logo.png"></ffimageloading:CachedImage>
					</StackLayout>
					<StackLayout Orientation="Vertical" Padding="35,0,35,20">
		            	<Label Text="{i18n:Translate HomeScreenTitle, StringCase=u}" Style="{StaticResource fieldLabelStyle}" HorizontalTextAlignment="Center" />
						<Label Text="{i18n:Translate HomeScreenHelpText}" Style="{StaticResource helpTextStyle}" HorizontalTextAlignment="Center" />
					</StackLayout>
		            <Button x:Name="takePhotoButton" Text="{i18n:Translate CaptureArtworkButton}" Clicked="OnCaptureArtwork" />
					<Button x:Name="chooseExistingButton" Text="{i18n:Translate CaptureMouldingButton}" Style="{StaticResource mutedButtonStyle}" Clicked="OnCaptureMoulding" />
					<Button x:Name="signOutButton" Text="{i18n:Translate SignOutButton}" Clicked="OnSignOut" Style="{StaticResource altButtonStyle}" VerticalOptions="EndAndExpand" />
		        </StackLayout>
			</ScrollView>
		</AbsoluteLayout>
	</ContentPage.Content>
</ContentPage>
Comment 1 Paul DiPietro [MSFT] 2017-10-03 20:23:02 UTC
Might have to do with the safe area in iOS 11 (which is actively being looked into), but it's just a guess.
Comment 2 Gustavo Gonçalves 2017-10-09 14:15:08 UTC
Same issue here, but it looks like the whole scrollview is being pushed down by the height of the status bar.
Comment 3 jmelliadis 2017-10-09 18:15:40 UTC
We are experiencing a similar issue in our application.
Comment 4 Rui Marinho 2017-10-27 14:49:05 UTC
Can users with the issue push a reproduction it will help us a lot. Thanks.
Comment 5 Austin Grigg 2017-10-27 17:15:29 UTC
Rui, Do you need a sample project or just a screenshot/video?
Comment 6 Samantha Houts [MSFT] 2017-10-27 19:53:55 UTC
https://github.com/xamarin/Xamarin.Forms/pull/1238
Comment 7 Dimitar Dobrev 2017-11-02 16:56:01 UTC
Hello all. Any idea when this pull is going to be merged and released? The issue with the safe area is much more general, it affects far more than scrolling.
Comment 8 Samantha Houts [MSFT] 2017-11-03 21:16:42 UTC
Should be fixed in 2.4.0 SR4. Thank you!
Comment 9 Mike Miller 2018-01-04 16:35:55 UTC
I am seeing this issue in Xamarin Forms 2.5.  I was not seeing it until I implemented a ControlTemplate.

I put what is essentially the exact same code into a control template and now the content of the page extends beyond the bottom of the page by the height of the status bar.  

The basic makeup is a control template with a content view put in the content of the page that is using the control template.  That content view is used on another page where I haven't yet implemented the control template and it still renders correctly.
Comment 10 Mike Miller 2018-01-04 18:18:50 UTC
I've done some playing around - and apparently the problem goes away if you set NavigationPage.HasNavigationBar="true"
Comment 11 Eric 2018-01-04 19:08:39 UTC
Although this bug seems to be resolved, I too am still having the same issue. I'm currently on Xamarin Forms version 2.5.0121934, iOS version 11.2.

On pages with a ScrollView and NavigationPage.SetHasNavigationBar(this, false), it seems the height calculation is off by the height of the status bar (or perhaps navigation bar) causing the page to scroll even when content is not larger than portrait view.
Comment 12 Francois Kreutz 2018-02-03 16:32:40 UTC
This is not fixed in version 2.5.0.122203 (iOS 11.2.5)

See attachment: page with a ScrollView and a relative layout, scroll view background is red.

All margins and paddings (for scroll view and relative layout) are set to zero.

You can eventually move the relative layout upwards by setting a negative margin on the scroll view.
Comment 13 Francois Kreutz 2018-02-03 16:36:45 UTC
Created attachment 26153 [details]
Bug screenshot

Note You need to log in before you can comment on or make changes to this bug.