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

Author: Jesse C.
Created: Jul 24, 2017
Privacy: This issue is public.
Found in
Standard affected: Clipping, Masking and Compositing – SVG 1.1 (Second Edition)
Found in build #: 14.14393
Reports: Reported by 1 person

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

0 attachments

Microsoft Edge Team
Steven K. Jul 24, 2017 2017-07-24T22:53:19.34Z
Changed Assigned To to “Steven K.”
Steven K. Jul 25, 2017 2017-07-25T00:45:17.78Z Microsoft Edge Team
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
Bogdan B. Oct 6, 2017 2017-10-06T00:51:24.94Z
Changed Status to “Confirmed”

Steven K. Nov 17, 2017 2017-11-17T02:56:23.97Z
Changed Status from “Confirmed” to “Not reproducible”

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

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

Details

Steps to reproduce

Attachments

0 attachments

Comments and activity