[Bug]: Scrolling glitch on component website

[dariadobrolinski]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

When navigating to a component documentation page on Untitled UI’s React docs, the page automatically scrolls up and down in a glitchy manner. This makes it difficult to read or interact with the component documentation.

Environment

• OS: Ubuntu Linux, Windows 11
• Browser: Zen Browser
• URL tested: https://www.untitledui.com/react/components/modals

Additional Context

I’ve recorded a screen capture of the issue, which I can provide for debugging if helpful.

bug.Report.Untitled.mp4

Steps to reproduce

1. Open a browser (tested in Zen Browser on Ubuntu Linux and Windows 11).
2. Navigate to a component page, e.g.: https://www.untitledui.com/react/components/modals.
3. Attempt to scroll or interact with the page.
4. Observe the page automatically scrolls unexpectedly.

Expected behavior

The component documentation page should remain stable and only scroll when the user initiates scrolling.

Actual behavior

The page auto-scrolls/glitches without user interaction, interrupting the ability to view documentation.

Code example

Browser

Firefox

Device type

Desktop

Component version

No response

Environment details

No response

Screenshots/Videos

bug.Report.Untitled.mp4

Console errors

Additional context

No response

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility

[deebov]

Hey @dariadobrolinski, thanks for reporting this!

Seems like this issue happens only in the browser and OS you've mentioned as I cannot reproduce this in MacOS. I'll try to have a look at this in Windows...

[gaiborjosue]

Hello @deebov, I think its a broswer issue, since I am running it same browser as @dariadobrolinski but on LInux, and I experience the same issue.

[kingmammad]

in window happen this issue @deebov

[HabitualCoder]

@deebov I inspected this issue on Windows 11 and here are my findings:

• There is no issue in Chrome, Edge and Opera browsers
• I saw the issue reported by @dariadobrolinski in Firefox (I dont have Zen installed).
• It seems the docsite uses lazy loading to load the components, I am guessing as I don't see the page in storybook locally.
• The issue seems to happen how Firefox and similar browsers render lazy loaded components, this is different from how Chromium browsers load lazy loaded components.
• Firefox recalculates height aggresively but since each container height is fixed within which a modal loads, so height should not be an issue.
• If multiple modals are fetching data from APIs, that can be a reason for this issue in Firefox.

While I couldn't try a fix at the moment as I don't have the source code but it depends whether you want to consider this as an issue. Chromium browsers are widely used browsers and there is no issue in it. One other thing I noticed is that the modals page is too long with too many modal components loading within its containers. If its fetching data from APIs, then can be the reason for the issue. Even though the page loaded correctly for me in Chrome, I see too long delay sometimes upto 5-6 seconds to load a modal.

One fix I can think of is breaking down the modal page into smaller pages. But this is just the modals implementation in docsite, a modal doesn't show up like this in an application. There will always be a CTA that loads the modal, static or not. Also, only one modal shows at a time. So, this issue should never happen in production.

[xamgore]

Has caught the same problem on slideout-menus page. I am on MacBook M3 16“. I believe there is a component that recomputes its size or position, which forces the outer scroll to reset.

[xamgore]

On this page I see that each of the examples tries to grab the text input cursor, which makes the browser insane (Firefox). Maybe it's something with enter animations. As the modals page has the same behavior.