[BUG] - Blurry text in chrome when modal opens

[TheCodeDestroyer]

NextUI Version

2.4.8

Describe the bug

When modal is initially opened the text is blurry, until your either resize the whole window or quickly toggle the will-change: transform, opacity; element style of parent div of section[role="dialog"]. Upon quick search I found some reports that this seems to be an issue with Chrome when using transform with % based values that result in half a pixel, especially with scale value change (one of the many topics on SO: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome).

Your Example Website or App

https://github.com/TheCodeDestroyer/nextui-modal-blur

Steps to Reproduce the Bug or Issue

1. Open Modal
2. Resize the window or toggle the will-change propery on the paren div of section[role=dialog]
3. Upon doing that tou will see that the font becomes sharper

Expected behavior

As I user when I open the modal I want the text to be sharp.

Screenshots or Videos

BEFORE (when opening modal):

AFTER (window resize or style prop toggle):

Style prop to toggle:

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1411 [BUG] - Blurry text in chrome when modal opens

[AnYiEE]

I suspect the issue is related to this commit: https://github.com/framer/motion/commit/c186b5a81613d6412d0a16a4c0eba3469c8563b9. I also faced problems with the will-change property on Popover and Tooltip components when applying the class backdrop-blur-* bg-*/{{number < 100}} to the content slot.

Fixing the version of framer-motion to 11.5.6 resolved everything. In this version or earlier, the value of will-change is auto, instead of transform, opacity after upgrading to the new version.