chore(Carousel): remove mix-blend-overlay

YIngChenIt commented 3 weeks ago

🔗 Linked issue

Resolves #1713

❓ Type of change

I found that the Carousel uses the 'mix-blend-overlay' CSS style property to enhance the visual effect of the indicators, but after multiple experiments, it was discovered that this property caused the issue.

Can we achieve the desired outcome by removing the use of this property, or if there are other good ideas, I am willing to provide assistance.

[ ] 📖 Documentation (updates to the documentation or readme)
[ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
[ ] 👌 Enhancement (improving an existing functionality)
[ ] ✨ New feature (a non-breaking change that adds functionality)
[ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
[ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

[ ] I have linked an issue or discussion.
[ ] I have updated the documentation accordingly.

benjamincanac commented 3 weeks ago

Well done for finding out the cause!

However, I don't feel removing this which is quite helpful to distinguish the indicators on top of different background images to fix a bug where some artifacts appear when:

a carousel is under a navbar with some backdrop filter
the mouse is moved around navigator tabs
on Chrome
on Windows

is a fair trade 😅

itpropro commented 3 weeks ago

Well done for finding out the cause!

However, I don't feel removing this which is quite helpful to distinguish the indicators on top of different background images to fix a bug where some artifacts appear when:

a carousel is under a navbar with some backdrop filter

the mouse is moved around navigator tabs

on Chrome

on Windows

is a fair trade 😅

I don’t think there is any real choice to this fix, as the bug impacts most of the webs users (Chromium based browsers on Windows). The artifacts are not only occurring on headers, but on every element on the page that uses backdrop blur so everyone who uses the carousel is blocked from using a blur backdrop filter. The mouse movement across the tabs is also a very common movement, so the chance of a user encountering this bug is very high (which is why we already received a bunch of reports from users of our application build with Nuxt UI about this). I think the highest priority should be to ensure that users have the best experience and that developers are not blocked off using common features like backdrop filters.

EDIT: Just to clarify, I am relating to the importance of fixing the issue itself, but before it should be ensured that the changes in this PR are actually fixing the root cause and have no alternate, less invasive solutions to them.

benjamincanac commented 3 weeks ago

Is there a Chromium open issue somewhere about a conflict between mix-blend-mode and backdrop-filter CSS properties? Its a common feature as well and not specific to our carousel component.

nuxt / ui