Svg With Mask Not Seen On Chrome

I'm trying to mask with some svg path that is created dynamically with React. The problem is that the resulted html code doesn't render properly on Chrome and Safari immediately. C

Solution 1:

For anyone who came to this page, I have same problem and I found can fix with mask-size and -webkit-mask-size.

do this in your css:

width: 100%;
height: 100%;
mask-size: cover;
-webkit-mask-size: cover;
background-color:#000;

Solution 2:

For anyone who faces a similar problem here's the solution that worked for me. The problem was solved by a combination of 1) and 2) from the above problem description AND the size of the mask parent svg element set by viewBox, not width or height attributes or css properties (https://css-tricks.com/scale-svg/#article-header-id-2).