"Property is nonstandard. Avoid using it." for '-webkit-mask-image' & '-webkit-mask-size'. What should I use instead?

user_9149884 0
Viewed 583

When I use '-webkit-mask-image' & '-webkit-mask-size', VsCode says "Property is nonstandard. Avoid using it.". I have no idea what should I use instead. My code is below:

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    animation: shine 1s infinite;
}

@keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}

enter image description here

frontend web-deployment css html
2 Answers

Try to change it from -webkit-mask-image / -webkit-mask-size to only mask-image and mask-size and see if that resolves the issue for you.

a.effect-shine:hover {
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-size: 200%;
    animation: shine 1s infinite;
}

You can also just add and define the properties mask-image and mask-size as shown below:

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    mask-size: 200%;
    animation: shine 1s infinite;
}

But that would still give you an error of 'Property is non standard. Avoid using it' but that would remove the red marks. I'd recommend going with the first snippet of code in my answer as these properties 'mask-image' and 'mask-size' are also a standard for browsers such as Safari,Opera, Chrome, Edge and Firefox.

user_177528820

instead of using the full term try using this "-webkit-mask:". it shows as a problem but ended up my image can glow perfectly.

.ha {
    position: fixed;
    transform-origin: 50% 0;
    z-index: -1;
    display: inline-block;
    width: 100%;
    height: 750px;
    padding: 0;
    background-image: url(../assets/img/sprite-home-single.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    -webkit-mask: linear-gradient(60deg, #000 30%, #0005, #000 70%) right/300%
        100%;
    background-repeat: no-repeat;
    animation: shimmer 2.5s infinite;
    color: gold;
}
user_154802570
Related