Fluentui: scrolling not possible inside Modal with iOS

[Kesshi]

Please provide a reproduction of the bug in a codepen:

https://codepen.io/anon/pen/wEmwXJ

Bug Report

• __Package version(s)__: 6.67.2
• __Browser and OS versions__: iOS 11.4.1

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: N/A

Describe the issue:

With the current fabric version it is not possible to have a custom scrolling area inside the Modal component. The scrolling doesn't work in iOS safari (in other browsers its working).
With fabric 6.52.0 it is still working.
broken version: https://codepen.io/anon/pen/wEmwXJ
working version: https://codepen.io/anon/pen/zJRgyP

Actual behavior:

Scrolling not possible.

Expected behavior:

Scrolling should be possible.

[Kesshi]

I think this PR is the reason for the issues: https://github.com/OfficeDev/office-ui-fabric-react/pull/5804

[kwilkins]

I'd also like to report I'm seeing the same issue on an android phone too, so seems to be effecting all mobile devices? Blocking the scroll events to just the .scrollableContent doesn't let me create a header within the content of the a dialog component and let me scroll a list below it.

broken: https://codepen.io/anon/pen/GPgOKj
working: https://codepen.io/anon/pen/XoJeME

This also prevents us from using the List component to scroll with within the dialog since we can't attach the data-is-scrollable={true} attribute to the .scrollableContent

[kevinbargary]

I have a similar issue with scrolling a modal content on Surface Pro device
https://codepen.io/anon/pen/xmwxZm

[micahgodbolt]

to be clear, you can scroll in a modal, but nested scroll regions are problematic. I can repro this using Chrome's "device toolbar".

Standard scroll works

But scrolling on internal scrollable content does not work. Tried swapping out flex-box for layout and still doesn't work.

@kkjeer seeing as this may be related to your #5804 work, can you take a look at this?

[kkjeer]

Removing the iOS scroll disable call added in #5804 does allow scrolling within the Modal. However, this then reintroduces the behavior that #5804 fixed - the user can now scroll the body behind the Modal. Unfortunately I don't yet know of a different way to fix the body scrolling behavior, so I see a few options here:

1. Revert #5804 and allow users to scroll the body behind Modals, Panels, and Dialogs
2. Make body scrolling a parameter so that users can opt-in (or opt-out) to this body scrolling behavior - e.g. add an allowBodyScroll parameter to Modal, Panel, and Dialog
3. Separate Modal into separate components, e.g. ModalHeader and ModalContent, similar to Dialog and proposed for Panel in #6658

[Pajn]

Due to the extremely open ranges of the internal packages, even though they are filled with breaking changes, it's impossible to install the older version without this issue as it instantly crashes.

Which versions of @uifabric/icons, @uifabric/merge-styles, @uifabric/styling and @uifabric/utilities are
[email protected] compatible with so that I can force them to be installed instead of the latest and downgrade fabric?

[dzearing]

Fabric packages follow semantic versioning as best as possible. We try very hard to avoid breaking changes, so if you hit something that breaks you, please let us know so that we can understand what was done wrong and how to avoid it. Many times, one person's feature is another person's bug, and it's difficult to get things right.

You can always look at any package's dependencies through unpkg.com.

https://unpkg.com/[email protected]/package.json

"dependencies": {
    "@microsoft/load-themed-styles": "^1.7.13",
    "@types/prop-types": "15.5.3",
    "@uifabric/icons": ">=6.0.2 <7.0.0",
    "@uifabric/merge-styles": ">=6.7.0 <7.0.0",
    "@uifabric/styling": ">=6.16.0 <7.0.0",
    "@uifabric/utilities": ">=6.14.0 <7.0.0",
    "prop-types": "^15.5.10",
    "tslib": "^1.7.1"
  }

[kwilkins]

3. Separate Modal into separate components, e.g. ModalHeader and ModalContent, similar to Dialog and proposed for Panel in #6658

This approach would solve our issue we're hitting. Our biggest gripe was that when we scrolled down in the content we couldn't see the header/close button anymore. Users had to scroll all the way back up to hit the x button to close a blocking modal dialog.

[msft-github-bot]

:tada:This issue was addressed in #7569, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

:tada:This issue was addressed in #7569, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site