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

Confirmed Issue #12914388 • Assigned to Steven K.


Jesse C.
Jul 24, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
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="">
<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>
  <mask id="mask">
    <rect x="0" y="0" width="100%" height="300"
    fill="#000000" filter="url(#makeWhite)">
  <g mask="url(#mask)">
    <image xmlns:xlink="" xlink:href="" width="2560" height="1920" preserveAspectRatio="none meet"></image>

I put the above code on for convenience:


0 attachments

    Comments and activity

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

    Sign in