BUG - Scrolling issues when browsing directly to SharePoint customized form on iOS/mobile devices

[tism]

When you create a large (long) SharePoint customized form using powerapps, and browse directly to the form (i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx), it's almost impossible to scroll to the bottom of the form in Safari on a iPhone.  

The reason being is that the form is displayed in a iFrame, and essentially it creates TWO vertical scroll bars in the browser - one for the entire SharePoint page, and one for the form.  Unless the user selects the CORRECT spot to scroll the form, they cannot scroll to the bottom of the form - they can only scroll so far as the height of the SharePoint page, which seemingly gives the impression that they can't scroll to the bottom of the form.  It's only when they scroll INSIDE the iFrame that they can get to the bottom.

Steps to replicate the issue:

1. Create a new SharePoint list, with lots of columns

2. Choose "Customize Forms" from the PowerApps menu on the list.

3. In PowerApps, "File > App Settings" and change the dimensions of the form to 350x812

4. Publish the form

5. Browse directly to the new item form via a desktop browser, i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx. Note that you'll see that there are TWO scroll bars (why?) on the page.

Two scroll bars - Desktop

6. In Chrome, browse directly to the new item form via a desktop browser, i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx and hit F12, select "Toggle Device Toolbar", and then select "iPhone X".  Note the double scrollbars issue is still present.  Using the mouse, scroll in the middle of the page to simulate what a user would be doing with their thumb (i.e. so that the LEFT HAND scroll bar is being moved up and down).  You can't scroll to the bottom of the form, unless you try scrolling in a different area.

Two scroll bars on small screen - causes scrolling issues

7. On a physical iOS device that has a smaller screen, such as a iPhone SE, using Safari browse to https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx.  It is even harder to scroll to the bottom of the form.

Scroll issue in iOS

[Kaja]

I've experienced a similar thing where the SharePoint integrated form doesn't render correctly on an IOS mobile device. At the end of the day, we decided to abandon the integrated form and created a standalone Powerapps app.

[Michael_23]

We are currently facing the same situation in a project. If I got this right, there seems to be some general trouble with iFrames on iPhones.

There is a solution suggested at https://davidwalsh.name/scroll-iframes-ios

Based on this source it is only necessary to add some CSS to the DIV which holds the iFrame:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>

and

.scroll-wrapper {
-webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

Just wanted to copy over this core information, in case the link gets broken.

However, since we use modern list experience, I found no way for a CSS injection to my newform.

Therefore unconfirmed solution.

[Parth]

Hope someone is looking into this i am also facing the same issue.

I have found some which says that this bug has been fixed but i can confirm that it is still there.