Safari not displaying SVG in the right position

Question

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 inside of the SVG is always centered.

.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%;
}

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

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

Answer 1

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%;