search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.06k stars 6.91k forks source link

[Bug Report][3.5.16] v-carousel-item gradient not working #19631

Open thany opened 2 weeks ago

thany commented 2 weeks ago

Environment

Vuetify Version: 3.5.16 Vue Version: 3.4.23 Browsers: Firefox 124.0 OS: Windows 10

Steps to reproduce

  1. Open the repro link
  2. Notice how only the first carousel item has a valid CSS gradient.
  3. Inspect the document
  4. Verify how the first item has an additional v-img__gradient element, which doesn't do anything useful.

Expected Behavior

That v-img__gradient item should probably contain the gradient specified in the gradient prop.

Actual Behavior

The gradient in the gradient prop has no effect.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

The documentation is ambiguous on what exactly the gradient prop is supposed to do, so we are left with nothing but the assumption that it is meant as a gradient overlay over the background image, and underneath the content, that is set using src.

SonTT19 commented 1 week ago

gradient only supports linear-gradient syntax for example: gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)" or with you reproduction link: gradient="to bottom, white, black"

thany commented 1 week ago

Oh I see. Can this be added to the documentation please?

And maybe generate a warning when in development mode. Otherwise it's like a silent fail, which is difficult to debug.