Open itpropro opened 3 weeks ago
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.
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 theCarousel
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 partIs 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