2

I have an svg image and I am using flex to center the svg image inside div. svg image is getting properly centered in Chrome, but if I am trying to use the same behavior in IE 11, svg image is getting completely expanded and it covers the entire div.

jsbin link: https://jsbin.com/qufuqekera/1/edit?html,css,output

.svgImage {
    width: auto;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

svg {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: left;
    transform-origin: left;
    position: absolute;
    border: 1px solid red;
    background-color: yellow;
    
}

.defaultSize {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid black;
    padding-top: 18px;
    padding-bottom: 18px;
}

.scroll-bar {
  overflow: auto;
  position: absolute;
  width: 100%;
}

.container {
  height: 60vh;
  position: relative
}
<div class="container">
<div class="defaultSize">
 <div class="scroll-bar" style="height: calc(100% - 36px)">
  <div class="svgImage">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1575.01 278.01">
    <defs>
        <style>.cls-1,.cls-3{fill:#009a38;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:1.01px;}.cls-2{font-size:7px;fill:#f2f2f2;font-family:SiemensSans-Roman, Siemens Sans;}.cls-3{stroke-width:0.99px;}.cls-4{fill:#c8c8c8;}</style>
    </defs>
    <title>SVG Image</title>
    <g id="Layer_2" data-name="Layer 2">
        <g id="svgImage" data-name="SVG Image">
            <g id="Auto_SVGImage" data-name="Auto_SVGImage">
                <g id="Right_Image" data-name="Right Image">
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
 </div>
</div>
</div>

Screenshot of output in Chrome displaying as expected: https://i.stack.imgur.com/COSm1.png

Screenshot of output in IE 11: https://i.stack.imgur.com/CWxo9.png

Harun Yilmaz
  • 8,281
  • 3
  • 24
  • 35
Asif Zaidi
  • 123
  • 3
  • 20
  • SVG and IE 11 are a known problem, IE 11 and `flex` as well, simply type "svg IE11" in the Stackoverflow searchbar. Your question is most certainly a duplicate – Jake Apr 03 '19 at 09:02
  • [A lot of known bug exists](https://caniuse.com/#search=flex) for IE flexing : maybe simply center the text ? Otherwise, it seems you should provide a unit when giving a flex value for IE. –  Apr 03 '19 at 09:02
  • What do you mean by centering the text/ providing a unit while giving flex value...? Can you please give an example. – Asif Zaidi Apr 03 '19 at 09:28
  • IE11 has only partial support for display:flex [see](https://caniuse.com/#search=display%3A%20flex) – Vishwa Apr 03 '19 at 09:31
  • Even after removing flex, I am getting vertical scrollbar and svg image is getting completely expanded in IE 11. – Asif Zaidi Apr 03 '19 at 09:57

0 Answers0