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 <img> and a <div> with background-image property. In this the SVG comes from 2 different sources. It looks OK! 200px by 200px
  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 <div> with background-image is resized to something like a fifth of the actual size.
  3. http://codepen.io/pontuswallberg/pen/PGJdWa - This one uses the same SVG and also added a duplicate of the <div> and I also put the element first. So the order now goes <div> -> <img> -> <div>. This instead causes the <img> to resize strangely. I’m guessing it’s being shown at original size which is 979px instead of the set height and width of 200px. So we only get to see the upper left corner.

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

  • I got to apologise but I totally forgot to add quote marks around my tags so the text it weird since it is hidding html-elements. Also I can’t find any way to edit this? So I have rewritten and added quotes so here is the actual readable text.

    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 instead. At one point I hade some elements with the background-image and some elements rendering with.
    To illustrate the problem I have created 3 codepens:

    1. http://codepen.io/pontuswallberg/pen/dpVqjJ - This has one and a with background-image property. In this the SVG comes from 2 different sources. It looks OK! 200px by 200px
    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 `` with background-image is resized to something like a fifth of the actual size.
    3. http://codepen.io/pontuswallberg/pen/PGJdWa - This one uses the same SVG and also added a duplicate of the and I also put the element first. So the order now goes -> ->. This instead causes the `` to resize strangely. I’m guessing it’s being shown at original size which is 979px instead of the set height and width of 200px. So we only get to see the upper left corner.

    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.

  • I give up… So apparently wrapping html-elements with quotes looks OK with Preview but actually renders without html-elements like this one `` when posted on the page. Good one.

    Just inspect the first post and read the source code it will make more sense.

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Status to “Not reproducible”

  • Thanks for the feedback on Edge.

    When I check out these code samples out in 14393 of Edge they all seem to load the same as Chrome.  Please note that we are not working on IE feature bugs any longer unless they are security related. As a result of the testing I have completed I will mark the item as not repro.

    All the best,
    The MS Edge Team

  • It actually reproduces in Edge, when mixing content:url() and background-image:url() on the same page, having both pointing to the same SVG.

    Edge 20.10240.17146.0

    Compare Edge vs. Chrome
    http://codepen.io/KilianSSL/pen/egjLwd

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

Sign in