CSS-изображение с линейным градиентом не работает в Edge

Question

Caniuse.com говорит, что Edge полностью поддерживает маску-изображение, но следующий код работает для меня во всех браузерах, кроме Edge.

width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

Это должно привести к появлению простого красного прямоугольника, красногосверху и прозрачный снизу.Протестировано в Chrome и Firefox без проблем.

Итак, это просто несовместимо с линейным градиентом?Я просмотрел сеть, но не могу найти ответ.

Answer 1

Вот мой тестовый код.

    #masked {
        width: 200px;
        height: 200px;
        background: red;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
<div id="masked"></div>

Я обнаружил, что если я не добавлю -webkit-mask-image, при работе в Chrome внизу не будет прозрачного.

Но это всегда хорошо работает на Edge.

Моя версия - Microsoft Edge 44.17763.1.0, Microsoft EdgeHTML 18.17763.

Answer 2

Согласно Можно ли использовать , mask-image поддерживается в Edge 18, но скрыто за флагом в более низких версиях.