You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Carousel component causes rendering bugs on elements that have blur applied with a backdrop-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
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:
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 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: