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

Not reproducible Issue #9162452

Details

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

Sign in to watch or report this issue.

Steps to reproduce

Hi!

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. http://codepen.io/pontuswallberg/pen/dpVqjJ - This has one and a
  2. http://codepen.io/pontuswallberg/pen/XjZPBj - This one is very similar to the first with the exception that is uses the same SVG for both cases. Here the
  3. http://codepen.io/pontuswallberg/pen/PGJdWa - 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 modern.ie 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.

Attachments

Comments and activity

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

Sign in