SVG mask with color transform doesn't render if mask is wider than 2/3 of the screen width
Not reproducible Issue #12914388
Steps to reproduce
If a window showing the following example page is sized to less than 2/3 the width of the current screen, the masked image with a carpet texture appears, but when it’s sized wider than that the image is not rendered. I’ve tried this on a 1920x1080 display, where the threshold is around 1285px, and on a 1280x720 display, where the threshold is around 858px. Since both displays are 16:9, it’s possible the threshold is actually proportional to the screen’s height, but testing on a 4:3 display would be required to confirm or deny this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="background:#808080; margin:0; padding:0;">
<svg version="1.1" width="100%" height="300">
<filter color-interpolation-filters="sRGB" id="makeWhite">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"></feColorMatrix>
</filter>
<mask id="mask">
<rect x="0" y="0" width="100%" height="300"
fill="#000000" filter="url(#makeWhite)">
</rect>
</mask>
<g mask="url(#mask)">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/b/b8/Hard_wearing_grey_carpet_texture.jpg" width="2560" height="1920" preserveAspectRatio="none meet"></image>
</g>
</svg>
</body>
</html>
I put the above code on codepen.io for convenience: https://codepen.io/jessecrossen/pen/dzyaKm
You need to sign in to your Microsoft account to add a comment.
Sign in