Safari not displaying SVG in the right position

I want to create some image placeholders that stay for 1 second and then fade out displaying the image. I am using SVGs that I generate by reading the image width and height.

The images (and SVGs) are responsive, adapting to the container size.

I want to also randomly place the images on four potential different places within the container: right, left (for portrait) and top, bottom (for landscape).

The SVGs are placed right on top of the images on Chrome, while on Safari the <rect> inside of the SVG is always centered.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

.continer svg {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

.container svg rect {
  width: 100%;
  height: 100%;
}

<!-- language: lang-html -->

<div class="container position-top">
  <svg viewBox="0 0 63.863757317722 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="1200" height="1879"></rect>
  </svg>
  <img src="image.jpg" alt="">
</div>

<!-- end snippet -->

Here is a codepen:
https://codepen.io/bbbellon/pen/PoxYQpP

On .container svg you need to switch

max-width: 100%;
max-height: 100%;

to be

width: auto;
height: 100%;

Setting a max-height and / or max-width is not a problem but it does not tell the <svg> what size you actually want it to be. If you use dev tools you'll see, with your original code, the <svg> takes up the whole .container and the <rect> sits centrally within that. The placement of the <rect> within the <svg> is expected behaviour. If you tell the <svg> to take up 100% of its parent's height and then set the width to auto the viewBox attribute will manage the scaling of the <svg> on your behalf.

As a side note, you do not need the following on .container svg rect

width: 100%;
height: 100%;