[Bug] iOS ScrollView scrolling vertically when it should only scroll horizontally

[joshv4pi]

Description

When calling ScrollToAsync on a horizontal ScrollView, the scroll view will scroll to the appropriate X location, however some height adjustments are made when they shouldn't. If there is any padding on the scroll view, it seems to use the padding in its height offset calculation, and therefore positions the scroll view's Y scroll offset incorrectly.

This appears to be a bug introduced with #14926 where the newOffset is calculated like so

if (newOffset.Y + ScrollView.Height > ContentSize.Height)
    newOffset.Y = (nfloat)(ContentSize.Height - ScrollView.Height);

When we click the first 'click to scroll' the values before the if are:

newOffset.Y = 0
ScrollView.Height = 115
ContentSize.Height = 95

and the values after the if are

newOffset.Y = -20
ScrollView.Height = 115
ContentSize.Height = 95

When we click the second 'click to scroll' the values before the if are:

newOffset.Y = 0
ScrollView.Height = 115
ContentSize.Height = 115

and the values after the if are

newOffset.Y = 0
ScrollView.Height = 115
ContentSize.Height = 115

It appears that using Margin on the StackLayout behaves differently to using Padding on the ScrollView even though visually they give the same inital layout result.

Steps to Reproduce

1. Download the sample project
2. Run on iOS device or simulator
3. Click the 'click to scroll' button near the top scroll view to make it scroll 200 pixels to the right.
4. Click the 'click to scroll' button near the bottom scroll view to make it scroll 200 pixels to the right.

Expected Behavior

Both scroll views scroll 200 pixels to the right.

Actual Behavior

The first scroll view scrolls 200 pixels to the right but also scrolls vertically.
The second scroll view scrolls 200 pixels to the right.

Basic Information

• Version with issue: 5.0.0.2401, 5.0.0.2337
• Last known good version: 5.0.0.2291
• Platform Target Frameworks:
  • iOS:
  • Android:
  • UWP:
• Android Support Library / AndroidX Version:
• NuGet Packages: Xamarin.Forms
• Affected Devices: iOS simulator/device

Environment

Show/Hide Visual Studio info

=== Visual Studio Community 2019 for Mac ===
Version 8.10.21 (build 4)
Installation UUID: 011c11d5-3e88-483f-b555-dabddccb478b
	GTK+ 2.24.23 (Raleigh theme)
	Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638)
	Package version: 612000162
=== Mono Framework MDK ===
Runtime:
	Mono 6.12.0.162 (2020-02/2ca650f1f62) (64-bit)
	Package version: 612000162
=== Roslyn (Language Service) ===
3.10.0-4.21269.26+029847714208ebe49668667c60ea5b0a294e0fcb
=== NuGet ===
Version: 5.9.0.7134
=== .NET SDK (x64) ===
SDK: /usr/local/share/dotnet/x64/sdk/6.0.103/Sdks
SDK Versions:
	6.0.103
	6.0.102
	6.0.101
	5.0.406
	5.0.405
	5.0.404
	3.1.417
	3.1.416
MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks
=== .NET Core Runtime ===
Runtime: /usr/local/share/dotnet/x64/dotnet
Runtime Versions:
	6.0.3
	6.0.2
	6.0.1
	5.0.15
	5.0.14
	5.0.13
	3.1.23
	3.1.22
=== .NET Core 3.1 SDK ===
SDK: 3.1.417
=== .NET 5.0 SDK ===
SDK: 5.0.406
=== Xamarin.Profiler ===
Version: 1.6.15.68
Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler
=== Updater ===
Version: 11
=== Xamarin.Android ===
Version: 12.0.0.3 (Visual Studio Community)
Commit: xamarin-android/d16-11/f0e3c2d
Android SDK: /Users/josh4pi/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		None installed
SDK Tools Version: 26.1.1
SDK Platform Tools Version: 30.0.4
SDK Build Tools Version: 30.0.2
Build Information:
Mono: c633fe9
Java.Interop: xamarin/java.interop/d16-11@476bb5b
ProGuard: Guardsquare/proguard/v7.0.1@912d149
SQLite: xamarin/sqlite/3.35.4@85460d3
Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-11@87af37b
=== Eclipse Temurin JDK ===
Java SDK: /Library/Java/JavaVirtualMachines/temurin-8.jdk/Contents/Home
1.8.0.302
Android Designer EPL code available here:
https://github.com/xamarin/AndroidDesigner.EPL
=== Android SDK Manager ===
Version: 16.10.0.13
Hash: 1b81df5
Branch: remotes/origin/d16-10
Build date: 2021-11-12 00:17:32 UTC
=== Android Device Manager ===
Version: 16.10.0.15
Hash: 89dcc0b
Branch: remotes/origin/d16-10
Build date: 2021-11-12 00:17:52 UTC
=== Apple Developer Tools ===
Xcode 13.3 (20102)
Build 13E113
=== Xamarin.Mac ===
Xamarin.Mac not installed. Can't find /Library/Frameworks/Xamarin.Mac.framework/Versions/Current/Version.
=== Xamarin.iOS ===
Version: 15.8.0.0 (Visual Studio Community)
Hash: f10d9e023
Branch: xcode13.3
Build date: 2022-03-15 11:47:35-0400
=== Xamarin Designer ===
Version: 16.11.0.60
Hash: 56f9b80b0
Branch: remotes/origin/d16-11
Build date: 2021-12-15 01:44:16 UTC
=== Build Information ===
Release ID: 810210004
Git revision: eb0b2f7259d35b7d767c79d91d356881227e0985
Build date: 2022-03-17 17:18:28-04
Build branch: release-8.10
=== Operating System ===
Mac OS X 12.3.0
Darwin 21.4.0 Darwin Kernel Version 21.4.0
    Mon Feb 21 20:36:53 PST 2022
    root:xnu-8020.101.4~2/RELEASE_ARM64_T8101 x86_64
=== Enabled user installed extensions ===
MFractor 4.4.10

Build Logs

N/A

Screenshots

Reproduction Link

ScrollViewScrollToTest.zip

Workaround

If you have a ScrollView and you want some internal gap don't use Padding on it but instead use Margin on its child.

[devperson]

Same issue for vertical scrolling. I have padding in ScrollView for right and left {10,0,10,0} and when I do ScrollToAsync to scroll vertically it also scrolls it horizontally to newOffset.X = -20 value, but it should scroll only vertically. I applied your workaround and it did fix, thanks.

[raphrbnt]

+1
Noticed the same behavior, either horizontally or vertically. Using Margin instead of Padding as a workaround indeed fixes the issue.

This can still be a problem in case for example you need to set a specific background color for the scrollview, setting margins will result in empty space around the view. You can place the scrollview inside another container to get around that also, but it would add up useless views just to fix that specific iOS problem.