A very weird css issue on modal backdrop layer
zoubingwu opened this issue Β· comments
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
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.
It's fine on Safari tho on my machine.
this no longer exists on my laptop with Chrome 109.0.5414.119