New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Carousel component causes rendering bugs in Chrome #1713
Labels
bug
Something isn't working
Comments
8 tasks
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
Version
Current
Reproduction
Description
The
Carousel
component causes rendering bugs on elements that haveblur
applied with abackdrop-filter
.This happens on every Chrome/Edge browser used on Windows on every page that uses the
Carousel
component. It can be seen in the Header component on the official Nuxt UI pages for the Carousel Docs and the Templates page:The issue is caused by JS that is loaded by the Carousel component. The closest I came to the root cause was line 121 in the
Carousel.vue
file.If this part
Is replaced by
The rendering issue is gone. If
itemWidth
is set to anything else than 0, even statically, the artifact appears.It would be great if someone could find out why this happens and how to fix this, as this impacts everyone who uses Chrome or Edge on Windows to consume a website, which is most of the world.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: