After this question being marked as a duplicate of SVGs not scaling properly in IE - has extra space I think this is a separate issue, though part of the solution is similar. I did some more digging and this is in fact much more a duplicate of this question. I can confirm it works. Using this code viewBox="0 0 2999.89 174.23" preserveAspectRatio="xMidYMax" seems to do the job. Max for bottom: 0, Min for top: 0.
Basically IE needs position to be set within the svg tag, and ignores absolute position rules from CSS.
This is a screenshot of Edge doing unwanted vertical centering:
Behaviour on Edge, the #curve3 div expands to full height of its parent and is vertically centred
Ok, trying to post this question in the correct SO way!
Why is MS Edge ignoring absolute position on the #curve3 div? (see code example) And why is that div appearing vertically centred, only in Edge?
.section {
background-color: green;
/*display: flex;*/
margin-top: 200px;
padding: 200px 0;
position: relative;
}
#wpshala_services_row {
position: absolute;
top: 0;
width: 100%;
}
#wpshala_services_curve {
height: 80px;
position: absolute;
top: -80px;
width: 100%;
}
.svg-container {
background-color: lightblue;
border: 1px solid red;
height: 80px;
position: relative;
}
canvas {
display: block;
width: 100%;
visibility: hidden;
}
#curve3 {
position: absolute;
bottom: -1px;
width: 100%;
z-index: 100;
}
#curve3 path {
fill: green;
}<div class="section">
<div id="wpshala_services_row">
<div id="wpshala_services_curve">
<div class="svg-container">
<svg id="curve3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2999.89 174.23">
<canvas width="2999.89" height="174.23"></canvas>
<path class="cls-1" d="M3000,300.5.11,301.22l.74-77.11c740.75-113.33,944-140.89,1480.15-10s1519-37.78,1519-37.78" transform="translate(-0.11 -126.99)"></path>
</svg>
</div>
</div>
</div>
</div>Original question and context:
On this site
the layout of curved svg sections is broken for MS Edge and IE11. It looks as expected in FF, Chrome and Safari. The svg curves are absolutely positioned within position: relative containers so that they can match the gradient (of the container immediately above or below) and also scale correctly at different screen sizes, while sticking to the adjacent container.
In IE11/Edge, however, these curves seem to be vertically centred within their container, rather than positioned absolute top or bottom (-1px).
I originally thought it was something to do with flexbox, but removing the display: flex from the .section didn't change anything.
Also the svg curve above 'services' is being constrained proportionally by the container's height (so that space is visible to the left and right of the curve, rather than it stretching full width). I could just increase that height, but would still need to be able to position it to the bottom of its container.
I also found a bug where margin:0 auto inside a flexbox container pushed content to the right edge of the container (this one was fixed by simply removing the unneeded margin: 0 auto). But strange how MS is doing so many things differently.
I can use vagrant to spin up an Edge browser in Win10, and IE11 in Win8.1, so was able to get this far with DevTools, and can test further. But are there known bugs with this?
I searched and found different bugs with either flexbox or position:absolute, but not this one specifically.
If so, what is the solution?
