Card renders blank inside a grid while scrolling
Means88 opened this issue · comments
Hello, I encountered a problem that cards inside a grid container (native or radix grid) renders blank when scrolling the page.
Browser: Chrome 123.0.6312.107 (arm64)
OS: macOS 14.4.1
@radix-ui/themes: 3.0.2
Can't be reproduced by macOS Safari and iOS/iPadOS Chrome, but the same issue happens in other Chromium based browsers in macOS.
Here is the reproduction: https://codesandbox.io/p/sandbox/wizardly-brown-z83czm?file=%2Fsrc%2FApp.js%3A34%2C10
screen.record.2024-04-06.10.41.16.mov
Card uses a blur background filter which can lead to these issues in certain edge cases.
In your case specifically, just don't nest Card in Card, that seems unnecessary. Browsers don't handle nested background filters well.
Alternatively, you can set panelBackground="solid" on the Theme (docs) to remove the background effect.