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
- Standard affected
- Clipping, Masking and Compositing – SVG 1.1 (Second Edition)
- 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
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.aspxWindows 10 latest insider faster release information:
Appreciate the support,
The MS Edge Team
You need to sign in to your Microsoft account to add a comment.
Sign in