No correct rendering in Material item

[fmatz]

Hi,

I am beginning with Vuetify & Material here: https://www.fmatz.com/Vuetify-Card-Work/chk_forms-poc.html

and if you click on an item there is white rendering in it.

Thanks, Fried

[Moonchild]

Works fine for me. Please make sure you're on the current, latest version (32.2.0)

[Kris_88]

Perhaps the problematic line is: "background-color: currentColor;"

[Moonchild]

Ah I missed the clicking on it.
This is why exact steps to reproduce when reporting something is important

Seems... both color and background-color are set to currentColor ...
I'm not sure if the first one even makes sense since you have a chicken and egg problem
The second one is definitely wrong because you're making the background the same as the text color with that line; meaning it will never show.

[Kris_88]

... both color and background-color are set to currentColor ...

MS Edge shows the correct picture, but it seems the background-color == color == white too.
There may be problem somewhere deeper... I don't know.

[Moonchild]

MS Edge shows the correct picture, but it seems the background-color == color == white too.

That makes no sense. if they are both set to white, it should be white. So Blink is doing it wrong then?

[Kris_88]

So Blink is doing it wrong then?

It is unlikely...

This div (.v-field__overlay) doesn't contain any text, it's just on top of the text. Yes, it's white on white, but there are some games with the opacity that are hard to track in the inspector...
Perhaps something does not work, like this:

Code: Select all

.v-field--variant-filled.v-field--focused .v-field__overlay {
  opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
}

[Kris_88]

.v-field--variant-filled.v-field--focused .v-field__overlay {
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
}

Yes, the problem is in the "calc".
--v-focus-opacity == 0.12
--v-theme-overlay-multiplier == 1
so, the opacity == (0.04+0.12)*1 == 0.16
but it has a value of 1 instead.

[dbsoft]

Is this another instance where we don't handle calc()?

[Moonchild]

Well since Mozilla did all that stuff in Servo, we might not have it. There's no real easy record of which values are and are not accepting it right now because mozilla never documented exactly which they started supporting with servo aside from "we now support all of them the spec says we should".

See Issue #1826 (UXP)