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

Not reproducible Issue #12914388

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

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

    • Hi Jesse,

      I am not able to repro this in 15063.483 or in the latest insider fast release.

      Will you tell me the complete version of Windows 10 you are using by running ‘winver.exe’ from the Start search bar, I.e.
      Cortana?

      There have been multiple SVG fixes and improvements in the recent Insider releases.  Do you have access to an insider build or a newer version of Windows 10 which includes the corresponding updated Edge release?
       
      https://technet.microsoft.com/en-us/windows/release-info.aspx

      Windows 10 latest insider faster release information:

      https://blogs.windows.com/windowsexperience/2017/07/13/announcing-windows-10-insider-preview-build-16241-pc-build-15230-mobile/#b8hfZQeioW1tPebJ.97

      Appreciate the support,

      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Confirmed”

      Changed Status from “Confirmed” to “Not reproducible”

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

    Sign in