[Bug]: On Safari, hovering dropdown items resets scroll for certain configuration

[idigra]

Library

React / v8 (@fluentui/react)

System Info

Pacakge version: React@8
Browser and OS version: Safari 15.5 (17613.2.7.1.8) on MacOS Monterey 12.4

Are you reporting Accessibility issue?

Yes

Reproduction

• Open codepen https://codepen.io/idigra/pen/yLvdvxK
• Click the caret and scroll down all the way down.
• Hover a little over the item list.
• Observe the item list scrolls back to the top of the list.

Few technical notes:

1. Turns out that dropdownItem.height property set to "auto" is required for the issue to occur. Changing to "100%" workarounds over the issue.
2. Notice this old Safari bug: https://bugs.webkit.org/show_bug.cgi?id=197189 The bug was already solved almost three years ago (I verified that it's not reproduced today), so I'm not sure if related.
3. Found also this bug, but I believe it's not related - not same behavior, and also repro on Chrome: https://github.com/microsoft/fluentui/issues/21167

Bug Description

Actual Behavior

Item list scrolls back to the top of the list.

Expected Behavior

No scroll should occur.

Logs

No response

Requested priority

High

Products/sites affected

Excel, PowerQuery

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[gouttierre]

@idigra -Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@TristanWatanabe - Would you be able to confirm if this is a regression, or if this behavior is an issue? A side note: I was unable to confirm the repro as i have a windows machine.

[TristanWatanabe]

@idigra I am unable to repro this issue on Safari 15.6 on MacOS Monterey 12.5 - can you confirm that this is still an issue with the latest safari and MacOS?

[idigra]

@idigra I am unable to repro this issue on Safari 15.6 on MacOS Monterey 12.5 - can you confirm that this is still an issue with the latest safari and MacOS?

@TristanWatanabe Sorry. It's still repro, but seems that I accidentally modified the codepen with the workaround (replaced height: "auto" with height: "100%"). I fixed it, please retry now: https://codepen.io/idigra/pen/yLvdvxK

[layershifter]

I tested it (used Codepen provided in the issue) and can reproduce it on Safari 15.6 and MacOS 12.5:

The bug is specific to Safari as I can't repro it in Chrome/Edge.

[micahgodbolt]

Note that this only happens when the dropdown is rendered to the right of the dropdown. Remove the layout from example and the jumpy behavior does not show up.

Not saying the solution is to change the layout, but it does help in identifying the possible issue.

[micahgodbolt]

Ok even more specifically. It only happens when you have the dropdownItem height set to 'auto'. Remove that value, or set it to anything static (50px) and the problem goes away.

[JustSlone]

Marking this Low Priority, there are a few workarounds for this issue. If someone wants to dig in and isolate this further more investigation would be helpful!

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.