How Comes Menulist is blurry on open??

[maxwaiyaki]

Describe the bug
Blurry MenuList

Expected Behavior
MenuList should be blurry

To Reproduce
Open the example MenuList on the docs

Desktop (please complete the following information):

• OS: [Windows 10 ]
• Browser [chrome and firefox]

[segunadebayo]

Hi @maxwaiyaki, this issue isn't clear to me.

Can you explain a bit more? If you can show a Codesandbox as well, that would be better.

[maxwaiyaki]

I'm not sure whether this is just a subjective performance case on my side but, popovers (which constitute the Menu Component, specifically the MenuList) seem to be blurred when open. Tooltips are also showing the same behavior.

This behavior is replicable by opening any of the Menu , Popover and Tooltip examples in the Chakra UI Docs.

Menu List

Popover

**

Seems to be a problem affecting other UI libraries using popover.js

1. [v4] Popovers looked blurred. twbs/bootstrap#22610
2. tooltip.js blurry tooltip text floating-ui/floating-ui#709

[maxwaiyaki]

I have been able to fix the problem by passing the following props to <MenuList />, Tooltip /> and <PopoverContent />

modifiers={{
  computeStyle: {
    gpuAcceleration: false
  }
}}

Reactstrap Solution reactstrap/reactstrap#1303 (comment)

[segunadebayo]

That's really weird.

Thank you for taking the time to find a solution.

[quang-m-nguyen]

I have been able to fix the problem by passing the following props to <MenuList />, Tooltip /> and <PopoverContent />

modifiers={{
  computeStyle: {
    gpuAcceleration: false
  }
}}

Reactstrap Solution reactstrap/reactstrap#1303 (comment)

i love you