search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.87k stars 722 forks source link

[ScrollArea] Weird scroll behavior in safari using tailwindcss container query and dangerouslySetInnerHTML #2921

Open zhhanging opened 1 month ago

zhhanging commented 1 month ago

Bug report

Current Behavior

Cannot scroll to bottom using mouse wheel in safari. The page will bounce back a bit when reaching the bottom.

https://github.com/radix-ui/primitives/assets/39266588/92bc2579-82b4-4a6a-a694-5867b13b8acd

I have tested a lot of combinations. This weird behavior only occurs when:

  1. Using safari. No such behavior in chrome and Firefox.
  2. Using mouse wheel instead of touchpad.
  3. Using tailwindcss container query plugin, add a @container className to the list items.
  4. Using an IntersectionObserver to observe a div at the bottom of the scrollarea viewport.
  5. Using dangerouslySetInnerHTML in list items.
  6. Using Nextjs. I tested in a vite/react project with the same code and it scrolls normally.

You need to satisfy so many conditions at once to reproduce this bug. This is way beyond my understanding of everything. It may not be a radix ui bug, even. I can't tell.

Expected behavior

Scrolls normally to the end.

Reproducible example

I have created an example here: CodeSandbox Example

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-scroll-area ^1.0.5
React n/a ^18
Browser Safari 17.5 (19618.2.12.11.6)
Assistive tech
Node n/a 20
npm/yarn pnpm 9.3.1
Operating System macOS 14.5
RinNguyens commented 1 month ago

I have a test sandbox with safari but it works fine. Maybe you need to check safari version. Safari : Version 17.1 (19616.2.9.11.7)