Fluentui: Sticky- for Edge browser sticky is bumpy

[tharshada]

Environment Information

• __Package version(s)__: (fill this out)
• __Browser and OS versions__: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

https://fabricweb.z5.web.core.windows.net/oufr/6.49.0/#/examples/scrollablepane

Actual behavior:

Edge

Expected behavior:

Chrome

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: Blocking

Products/sites affected: (if applicable)

[tharshada]

@leddie24 @mikewheaton @Vitalius1 can this be prioritized?

[mikewheaton]

I'm seeing the "Item List" text jump a little during a scroll, making it not appear like a seamless transition from scrolling to sticky. But I see the same issue in Chrome (although maybe to a lesser extent) so it doesn't seem like a browser issue. If I scroll slowly it's fairly smooth.

@leddie24 Does this look like a regression, or was it always a known issue?

[Vitalius1]

I believe this could happen due to this line:
https://github.com/OfficeDev/office-ui-fabric-react/blob/ad66a786355b332c854d9e6c6f2afe43068f6236/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx#L55.
Removing that debounce could cause some other performance issues.

[tharshada]

@shagra-ms

[leddie24]

I know Edge does handle scroll event differently than Chrome and Firefox though, I've tried adding parallax to images and the scroll events in Edge produce a choppier effect when compared to Chrome/Firefox. I want to say this is at the browser level. I included links below demonstrating the issue with setting throttle to 1. Even at a super slow scrolling rate, the problem repros in Edge, but not in Chrome and Firefox.

Edge:
https://streamable.com/jb34n

Firefox:
https://streamable.com/yxe8q

Chrome:
https://streamable.com/e90m0

[Jahnp]

Thanks for the insight Eddie. Sounds like it might be good for us to confirm with the Edge team if this is expected behavior for scroll handling, if there's a planned fix, why identical code produces different results, etc. As you pointed out, when we implemented parallax animations in SharePoint, we ended up having to disable them in Edge due to this.

Let's commit to figuring out a path here in February.

[micahgodbolt]

This issue seems to be pretty well resolved. While the behavior isn't identical (as noted #11492), it is way more in parity with chrome. I think we can close this and keep #11492 open as a fit and finish issue.