Adding disableGpuAcceleration prop to prevent blurriness caused by Popper.js gpuAcceleration

[esinarta]

Background

Hi and thanks for your work on this great library! Apologies if this isn't the best place to put this suggestion because it's a little complicated. @johnnyoshika and I ran into this issue while using your library with our app and we made some changes that could be a potential contribution.

We made these changes to an older version of react-floater (v.0.7.3) since that's the version react-joyride currently uses. We then changed react-joyride to reference this modified version of react-floater.

If you decide this would be a worthwhile contribution, let us know how to best proceed.

Issue

When zooming in/out with the browser, the content inside the floater can be blurry due to Popper.js' use of CSS translate3d.

This can be fixed by disabling computeStyle.gpuAcceleration in Popper.js: https://popper.js.org/docs/v1/#modifiers..computeStyle.gpuAcceleration

The difference is subtle, especially on high-res displays, and it may be difficult to see but here are screenshots for comparison:

computeStyle.gpuAcceleration enabled

computeStyle.gpuAcceleration disabled

disableGpuAcceleration Prop

We added an optional disableGpuAcceleration prop into react-floater that adds this option when a new Popper is created:
examind-ai/react-floater@28c47e1

Then, we used this modified version of react-floater with react-joyride to allow us to specify disableGpuAcceleration through JoyRide's floaterProps.

<Joyride
  steps={steps}
  run={run}
  floaterProps={{
    disableGpuAcceleration: true,
  }}
/>

You can view the 2 repos here:

• https://github.com/examind-ai/react-floater
• https://github.com/examind-ai/react-joyride

[ajay-if]

 <Joyride
               ....
                floaterProps={{
                    options: {
                        computeStyle: {
                            gpuAcceleration: false
                        }
                    }
                }}
            />

[gilbarbara]

Hey @esinarta

As mentioned by @ajay-if, you can change the option using floaterProps.
I'm currently migrating this library to use the newest version of react-floater, and I'll consider setting a new prop for this.

Thanks for the effort anyway!

[gilbarbara]

I migrated the positioning to @floating-ui in v3.0.0, probably easy to achieve with it.

Full migration guide: https://react-joyride.com/docs/migration
What's new: https://react-joyride.com/docs/new-in-v3

Thanks