Weird sizing issue when rendering the same svg as background-image and <img> in the same page

Not reproducible Issue #9162452


Pontus W.
Oct 2, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce


I noticed this weird resizing issue the other day when I was changing from using a svg as a background-image property to an <img> instead. At one point I hade some elements with the background-image and some elements rendering with <img>.

To illustrate the problem I have created 3 codepens:

  1. - This has one and a
  2. - This one is very similar to the first with the exception that is uses the same SVG for both cases. Here the
  3. - This one uses the same SVG and also added a duplicate of the

I can’t wrap my head around why this is happening! Why is using the same svg-file for different properties causing weird sizing behaviour? I have tested this in virtual machines from using IE11 and Edge browser. My machine is a Macbook Pro Retina 15. I have also tested this in chrome, firefox and safari were it renders correctly.


Comments and activity

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

Sign in