CSS image mask not showing in edge but works fine in Firefox and Chrome

Asked Nov 24 '19 at 20:28

Active Mar 07 '20 at 12:03

Viewed 1,203 times

I have a slider with an image mask which works fine in Firefox and Chrome (attached)

The CSS for it is quite simple:

position: absolute;
bottom: -150px;
width: 800px;
left: 50%;
transform: translateX(-50%);
z-index: 5;

-webkit-mask-image: url(assets/svg/mask.svg);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(assets/svg/mask.svg);
mask-size: 100%;
mask-repeat: no-repeat;

But when i open the page in Edge i don't see the element at all. I tried switching the mask to a PNG file, no luck. i thought maybe its the sliders fault, but even if i switch the content of the div to a blank black element (which also works in Firefox and chrome) i still get no result in Edge.

If i cross off the "mask-image" property the slider appears on the screen and works fine.

Here is the demo: http://box5602.temp.domains/~ednahous/

I have another website with an image mask on top of a video and it works fine in Edge... so i really have no idea what could be causing this issue.

edited Mar 07 '20 at 12:03

Temani Afif

245,468
26
309
415

asked Nov 24 '19 at 20:28

David Robert

I saw this page a lot of times and as i said, i have another website with an image mask that works fine in Edge with very similar mask rules. – David Robert Nov 24 '19 at 20:40
not sure if it causes your bug, but `webkit` prefixed rules should come before standard ones – Teo Dragovic Nov 24 '19 at 20:53
@TeoDragovic Tried both ways but still not working, will place webkit on top anyway to prevent confusion. – David Robert Nov 24 '19 at 21:00
any way to share a full working example. It might be something not related to mask at all – Temani Afif Nov 24 '19 at 21:01
@TemaniAfif Added a link to the demo in question – David Robert Nov 24 '19 at 21:04
@MrPizzaGuy I have looked over this question before submitting mine. its has nothing to do with the problem there. – David Robert Nov 24 '19 at 21:05
Inside Edge you have got a Javascript error - fix it first (check console). – skobaljic Nov 24 '19 at 21:16
@skobaljic fixed. But it doesn't have to do with the CSS or the problem. – David Robert Nov 24 '19 at 21:19
1

ok, sorry @DavidRobert. Can you edit your question so it says that you have researched so you don't get misconceptions like this? – Mr PizzaGuy Nov 24 '19 at 22:05
anything weird with the SVG edge would not like ? – G-Cyrillus Nov 24 '19 at 23:36

CSS image mask not showing in edge but works fine in Firefox and Chrome

0 Answers0