CODEWITHSUNDEEP
cssmicrosoft-edge
Erik
Erik

Reputation: 3198

SVG in MSFT Edge sometimes goes invisible or distorts

I'm using this inside Angular if it matters, but for some unknown reason only in Edge.. as I move the mouse around on the screen the img will either distort and render with some of it missing, or completely disappear

thoughts?

<img class="my_image_class" src="img/My-Svg-ToRender.svg" ng-src="img/My-Svg-ToRender.svg">

associated CSS for this element is as follows.. I've tried setting no height and no width, setting height and width.. behavior doesn't change

img.my_image_class {
   width: 100%;
   -webkit-user-drag: none;
}

there is other parent CSS, but it looks like just margins, borders, padding

edit :

turning everything I can off, in CSS, I notice the svg will not render UNTIL I mouse over it.. I do not see any directives that could be modifying the svg's CSS and don't see any transformations occurring

Upvotes: 0

Views: 1001

Answers (2)

Peter
Peter

Reputation: 171

I had my inline svg images disappear on hover. I had the following styling: svg {width: 100%; height: 60px;} The 'width: 100%' styling was intended to activate the hover styling as soon as the mouse entered the containing block element. This caused som strange behavior on the svg image. Mouse-in from top or bottom functioned as expected, mouse-in from left or right caused the svg to disappear. Removing the 'width' styling, solved the problem.

Upvotes: 0

hxlnt
hxlnt

Reputation: 636

I found some open issues on SVGs through Microsoft's feedback portal; it looks like a recent update may have negatively impacted SVG display in Edge (e.g., https://connect.microsoft.com/IE/feedback/details/2350665). Based on what I've read about this issue, it seems like text boxes are a common culprit.

My website displays a logo as an SVG containing text, and it renders without problem in Edge. However, before I exported my SVG from Illustrator, I converted all text to paths. I did this for a similar reason: I was having issues with SVG text display in Safari.

Of course, ideally, SVGs should just work in all browsers. And it seems like this issue is on the fix-list for Edge. But in the meantime, perhaps this workaround will help! Cheers!

Upvotes: 2

Related Questions