search

Frontify / fondue

Design System of Frontify
https://fondue-components.frontify.com/
20 stars 4 forks source link

Flyout: Scroll glitch (Safari on macOS) #796

Closed getflourish closed 11 months ago

getflourish commented 2 years ago

If the content of a Flyout has overflow, the scroll behavior is odd. It happens when you reach the top or bottom of the container. It’s difficult to see in the compressed GIF, but I've added a reproduction.

AFAIK, it’s related to Safari on macOS. Chrome is fine, but the scroll behavior isn’t ideal either.

Reproduction @ 9.1.0 https://codesandbox.io/s/flyout-frontify-arcade-9-1-0-detoif

Kapture 2022-05-13 at 18 23 53

julianiff commented 2 years ago

@getflourish i was able to reproduce the issue, but did not find a solution, as it seems to be linked to the rendering of safari (Some reported issues of how overflow-y: auto is rendered in safari, but not much more). Do you have any input on what the fix for such an issue could be?

jonasbuechel commented 2 years ago

We're able to reproduce it. The first look shows it's an issue within useContainScroll.ts

ryancarville commented 11 months ago

@getflourish @julianiff @jonasbuechel 👋

I just re-checked this and it looks like whatever issue we had with overflow-y on Safari/Chrome is no longer an issue. I will close this, but please re-open if you feel this is not resolved.