Misalignment of Preloader on iPhones

I have the following preloader:

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');
.svg-file {
  width: 40vw;
  max-width: 133px;
}

.svg-file path {
  fill: transparent;
  stroke-width: 3;
  stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
  stroke-dasharray: 550;
  stroke-dashoffset: 0;
}

.svg-file.z-logo path {
  animation: animate-zlogo 2s linear infinite;
}

.svg-file.z-logo svg {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
  transform: scale(2);
}

.svg-file h2 {
  font-family: "Roboto", cursive;
  transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
  font-size: 3em;
  color: #044d77;
}

.svg-file span {
  animation: dots 2.5s steps(6, end) infinite;
  font-size: 5em;
  display: block;
  transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
  background-color: rgb(5, 46, 80);
  width: 8px;
  height: 5px;
}

@keyframes fadein-fadeout {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes animate-zlogo {
  0% {
    stroke-dashoffset: -50;
  }
  20% {
    stroke-dashoffset: 550;
    fill: transparent;
  }
  40% {
    fill: transparent;
    stroke-dashoffset: 1100;
  }
  60% {
    stroke-dashoffset: 1100;
    fill: #05f7f9;
  }
  80% {
    stroke-width: 0;
    fill: #05f7f9;
  }
  100% {
    /* stroke-dashoffset: 0; */
    stroke-width: 3;
    fill: transparent;
  }
}

#preloader {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.z-logo svg {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  display: flex;
  width: 50%;
}

.z-logo::before {
  content: "";
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background: black;
  position: absolute;
  display: inline-flex;
  border: 1px solid black;
  width: 60vw;
  max-width: 200px;
  height: 60vw;
  max-height: 200px;
}

<!-- Preloader -->
<div id="preloader">
  <div class="svg-file z-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
        <g id="H">
          <path
            d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"
            fill="#47AF9A" />
        </g>
      </svg>
  </div>
</div>

This seems to work fine on Android devices such as Samsung phones...etc. However, for some reason, the width of the letter "H" gets misaligned on iPhone devices such as iPhone 14, as shown below:

I have included the Meta tag and tried every solution such as modifying the .svg-file.z-logo class and adding these properties:

  display: flex;
  justify-content: center;
  align-items: center;

This still does not fix the issue. Any help would be highly appreciated! Thanks.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/azCTM7e