d.h. d.h. - 2 months ago 31
CSS Question

IE Bug: SVG marker visible outside viewport

I came across a bug in Internet Explorer 11 where a marker path is still displayed even if an outer element got the overflow:hidden attribute.

Here is an example of the described problem (need to be viewed in IE11)

Here is the Code sample:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width: 440px; height: 495px; overflow:hidden; border: 1px solid red">
<svg>
<g transform="translate(413.209 51.1721) scale(0.514057)">
<defs><marker id="end" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" fill-opacity="1" fill="#888" orient="auto" class="arrowhead"><path d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs>
<path marker-end="url(#end)" style="fill:transparent; opacity: 1; stroke: #000; stroke-opacity: 1;" d="M323.921875,-19.2421875H-465.20818355008544V961.2877197265625H-465.20818355008544V981.2877197265625"></path>
</g>
</svg>
</div>
</body>
</html>


Image of the problem:

the red border is the outer div which has overflow:hidden

What I expected is that the marker is hidden as well. Has anybody experienced the same before?

Somehow this only occurs if a zoom larger or smaller than 100% is used.

Answer

I came across the following article about a similar problem on css3 transformations and overflow:hidden:

https://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

There was the suggestion to use:

svg { opacity: 0.99; }

This mysteriously solves the problem.