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

Confirmed Issue #12922924 • Assigned to Bogdan B.

Details

Author
Jesse C.
Created
Jul 25, 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

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Confirmed”

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

    Sign in