CODEWITHSUNDEEP
cssmicrosoft-edgebrowser-support
Raquel Santos
Raquel Santos

Reputation: 110

Why doesn't background-clip work on Edge?

I am using background-clip on a heading h2 in my website, but somehow is not working on Edge. In Chrome and Firefox is amazing, but when I open in Edge the heading h2 is there but with transparent (i guess). I checked on caniuse.com and says that is supported on edge. So I don´t understand why is working every browser less this one.

I used the same @supports(-webkit-background-clip:text) just in case it won't support somehow, but because it is supported doesn't work and the heading is transparent.

This is my code: 

.heading__secondary{

    text-transform:uppercase;
    font-size:$default-heading2-size;
    letter-spacing:0.3rem;
    font-weight:600;
    line-height:1.5;
    background-image:linear-gradient(to right, $color-secondary-dark, $color-primary-dark);
    display:inline-block;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent; 
    transition:all .2s ease-in-out;


    &:hover {
        transform: rotate(-2deg) scale(1.06);
    }

I just want to know what I have to do to show on Edge like is showing in the other browsers.

Upvotes: 1

Views: 1206

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

I try to test the sample code from MDN site and it looks the sample for background-clip is working fine in MS Edge browser.

Reference:

background-clip

I also tried to test your code above. If you try to see the applied styles using developer tools than you can notice that background-image and &:hover is not applied.

Similar result I got in both chrome and Edge browser. This can be the root cause for the issue. You can notice in the image below that background-clip is applied successfully in Edge and chrome both browser.

enter image description here

It means that some other style code creating this issue. I suggest you to use the developer tools to find the applied styles for any specific element on your web page may help you to find the cause for this issue.

If issue persist than please try to provide the detailed code example including your relevant CSS and HTML code which can produce the issue with MS Edge browser. It will be better if you also try to include the snapshots of the output from chrome and Edge can help us to understand the issue in better way.

Upvotes: 2

Related Questions