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

Issue #14558941 • Assigned to bbrinza

Details

Created
Nov 7, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
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

https://jsfiddle.net/chickboom/uhLrdzL1/

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...



.unit_frame_right{
  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%;
  }
      .rose_frame_right{
        max-height: 35%;
        max-width: 100%;
        flex: 35 0 0;
        }

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “wptcomptri@microsoft.com”

    Changed Assigned To to “bbrinza”

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

Sign in