CSS mask-image with linear gradient not working in Edge

Issue

Caniuse.com says that Edge has full support for mask-image but the following code is working in all browsers for me except Edge.

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

This should produce a simple red box which is red a the top and transparent at the bottom. Tested in Chrome and Firefox with no problems.

So, is it just incompatible with linear-gradient? I have scoured the web but can’t find an answer.

Solution

Here is my testing code.

    #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>

I’ve found that if I do not add -webkit-mask-image, when running on Chrome, there will be no transparent at the bottom.

But it always works well on Edge.

My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.

Answered By – Jenifer Jiang

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0