Carousel component causes rendering bugs in Chrome

[itpropro]

Environment

• OS: Windows 11
• Browser: Chrome/Edge latest

Version

Current

Reproduction

• https://ui.nuxt.com/pro/templates
• https://ui.nuxt.com/components/carousel

Description

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

    useResizeObserver(carouselRef, (entries) => {
      const [entry] = entries

      itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
    })

Is replaced by

    useResizeObserver(carouselRef, (entries) => {
      const [entry] = entries

      // itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
    })

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

[YIngChenIt]

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.