SVG mask with color transform doesn't render if mask is wider than 2/3 of the screen width

Issue #12914388 • Assigned to Steven K.

Details

Author
Jesse C.
Created
Jul 24, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

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

Attachments

0 attachments

    Comments and activity

    You need to sign in to your Microsoft account to add a comment.

    Sign in