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

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

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

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:

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" 
			<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 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" />
		            <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" />
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
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 (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
Comment 14 raver99_mail 2018-03-27 09:47:41 UTC
I am seeing the same issue.
For me it worked to put a Top Margin of 20 (height of the status bar). 
Not sure how exactly this affects height calculations, but it seems to work in my case.
Comment 15 Francois Kreutz 2018-03-27 09:52:54 UTC

On what did you set the top margin?
Comment 16 raver99_mail 2018-03-27 11:02:13 UTC
Sorry, forgot to mention it.
On the ScrollView.