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.

work well on Edge

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

Leave a Reply

(*) Required, Your email will not be published