Flickering Scroll Bar in Chrome During Tour Navigation

[danleeb]

🐛 Bug Report

When a tour starts or the user navigates between steps, a vertical scroll bar appears for a split second in Chrome/Chromium browsers if the page otherwise has no scroll bars.

To Reproduce

This can be reproduced using a Chrome browser in the "Carousel" example in the official demo sandbox: https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo

Expected behavior

If the step popup can be contained on the current page, scroll bars should not be displayed to prevent the page layout from jumping for a split second.

[gilbarbara]

Hey @danleeb

This seems like an implementation problem, not an issue with the library itself.
Anyway, I don't see it. Which platform are you using?
Do you have this specific problem on your app, or is it just related to the demo?

[danleeb]

Thank you for looking into it.

I'm using Chrome 131.0.6778.108 on Linux. Same issue with Chromium 131.0.6778.85 and Edge 104.0.1293.47.

Here is a gif showing the problem with the official demo carousel example:

Sorry for the bad quality, but you should see the flickering scroll bar. Yes, the problem also occurs in my app.

[gilbarbara]

Hey @danleeb

Humm, Linux.
If you stop or skip the tour on that page, isn't the scrollbar visible? It only shows when the tour is running.
I don't have a Linux machine to test it. Even Browserstack doesn't have Linux.

[danleeb]

The scrollbar is not visible unless I click the start/next/back buttons.

I can reproduce the issue on Windows with Chrome as well. Just tested it in Browserstack with Windows 11 and Chrome 131 (latest). Going to https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo, selecting the "Carousel" example and navigating the tour shows a flickering scrollbar like in the gif above.

[gilbarbara]

I have tested on the latest Chrome//Firefox/Edge on Windows 11 and haven't seen any flickering.
The scrollbar is constantly visible.

[danleeb]

If the scrollbar is visible you must increase the window/viewport height so it's not visible anymore. Then click the "next" button. Just like in the gif above.
My collegues can also reproduce this (on Mac with Safari as well).

[gilbarbara]

Hey @danleeb
I could replicate it, but I couldn't understand why it was happening.
I tried to log the documentElement and the overlay clientHeight and scrollHeight, but they wouldn't necessarily trigger the scroll to appear, especially between steps when the overlay isn't visible.

Anyway, I don't have much time to investigate now, so feel free to submit a PR.

[danleeb]

I submitted a PR that should fix the issue. Unfortunately, it's not the most elegant solution, but it should give you an idea of how to fix it.

From the PR:

The problem seems to be that the floater element is initially positioned at the bottom of the page and therefore takes additional space. This results in the appearance of the scroll bar until the floater element is correctly positioned. I could fix it by setting some absolute styles. However, this seems to be a workaround and the underlying issue may actually be in the react-floater library.

[danleeb]

My current workaround to prevent the scrollbar from flickering is setting floaterProps on the Joyride component:

<Joyride
  steps={steps}
  floaterProps={{
    styles: {
      floater: {
        position: "absolute",
        top: 0,
      },
    },
  }}
/>