MS-Edge inline SVG sizing as Flexchildren - preserveAspectRatio not respected

Issue #14558941 • Assigned to bbrinza


Nov 7, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I am designing a React full page page WebApps and its grid layout is made of flexboxes inside each others. Components are inline SVG. Everything is fine with Chrome, firefox and safari. But with MsEdge I have recently discovered a strange behaviour when it comes to work out the SVG sizes and positions.(as flexChildrens) preserveAspectRatio="xMidYMid meet" seems to be erratically changed to preserveAspectRatio="xMinYMin slice" or “…none”

With MSEdge, just go to

and resize the rendering frame (from wide Landscape to narrow Portrait). SVG are blue and their container class has red border. Here you can find the desired behaviour (Img1)

But it erratically jumps to this (Img2)

In Portrait mode it is the same, here is the desired rendering (Img3)

with jumps to (Img4)

Note that by opening the Developer tool, if I tick off and on the property "max-height: 35%;", this will set the SVG to its desired dimension…

All my svg are designed this way :

<div class="unit_frame_right">
    <svg class="rose_frame_right" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
        <rect x="0" y="0" height="100" width="100" stroke="blue" fill="blue" fill-opacity="0.5"></rect>
        ...svg content...

  flex: 4 0 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  display: flex;
  font-size: 2vmin;
  max-height: 100%;
  max-width: 40%;
        max-height: 35%;
        max-width: 100%;
        flex: 35 0 0;


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “”

    Changed Assigned To to “bbrinza”

  • And so ? What’s new ?

  • Sorry but I can’t wait any longer. I need this to be fixed. Or I will have no other choice but to restrict Edge users access to my website with a message to underline MS responsability and unability to follow w3c rules…

  • Thanks for your report. 

    There has been no recent activity on this issue because it did not meet the bar for the next release of Edge. We handle thousands of issue each release, a number comparable to other browsers like Google Chrome or Mozilla Firefox, and like these other browsers it simply isn’t possible for us to fix all these issues, and we have to prioritize them. This issue is in consideration for being fixed in the second half of 2018 (and there is no reason to investigate further if we are not going to fix it in the coming two months). Please note that there is no guarantee we will ultimately decide to fix the issue then, only that we will considerate it.

    Regardless of whether we were able to fix this issue in the future, some of your users will still use older versions of Edge and IE and you will want to put a workaround in place for these users. It’s not very difficult to work around this issue, and I hope you will consider using a workaround (like a wrapper around the svg so that the svg itself is not a flex item) and be constructive instead of just blocking access to Edge users, but I have no control over what you will actually be doing in the end. 

    Besides, I’m fluent in French and have no trouble understanding that the application you seem to be developing is a game. When we have the opportunity to fix issues, we consider the importance of the website being broken, so if you have an example of site being affected, please feel free to mention it here, but right now this is a theoretical issue from our point of view, and while it’s rather severe, it has to leave way to issues affecting published websites, especially popular ones.

    Best regards,
    Francois, for the Web Platform Layout team

  • Feel free to comment here or send an email at my email (alias: frremy) if you have more context on severity and business impact for your company (like, for example, why implementing a workaround is not a solution you are willing to consider).

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

Sign in