search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
22.19k stars 1.56k forks source link

[BUG] - Backdrop blur w/ ScrollShadow #3563

Open BCPTe opened 4 months ago

BCPTe commented 4 months ago

NextUI Version

2.4.2

Describe the bug

When using backdrop-filter: blur(Xpx) on a div which is inside a ScrollShadow, the filter doesn't work.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Create a ScrollShadow element
  2. Put an element (div for simplicity) inside the ScrollShadow
  3. Add backdrop-filter: blur(Xpx) to the div in css or backdrop-blur-{size} in the classnames if using tailwind

Expected behavior

Im expecting the filter to work (the background to be blurred)

Operating System Version

Linux - Ubuntu 22.04 LTS

Browser

Chrome

linear[bot] commented 4 months ago

ENG-1212 [BUG] - Backdrop blur w/ ScrollShadow

wingkwong commented 4 months ago
  1. please try the latest version first
  2. if it still fails, then please provide a reproducible example in sandbox
BCPTe commented 4 months ago

Here an example: Example Sandbox

I noticed that the problem only occurs when there is an overflow.

awesome-pro commented 4 months ago

@BCPTe I have investigated your issue and and I think mask-image css is overriding the backdrop-blur style.