A very weird css issue on modal backdrop layer

[zoubingwu]

Bug report 🐞

I might run into some chrome bug but I'll just post here in case anyone else having the same issue.

This is very weird, you can see the gif below, the modal backdrop layer turns 100% black, and it goes normal if I resize the browser window(thru mouse or open devtool with shortcuts).

I'm using a m1 Mac with latest chrome installed.

Adding css code like below to turn off the opacity transition on the layer will fix it.

#geist-ui-modal .backdrop .layer {
  transition: none!important;
}

Version & Environment

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.67 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Safari: 15.4

• Version of geist-ui/core: latest one as today, both on my local dev environment and offcial site

[marco910]

I have the same issue. Using version 2.3.6 of Geist-UI

Maybe that's an Apple M1 issue. I'm having an M1 Max in my machine and facing the same issue. Others who aren't using an M1 doesn't face the issue.

[zoubingwu]

It's fine on Safari tho on my machine.

[zoubingwu]

this no longer exists on my laptop with Chrome 109.0.5414.119