iPhone设备中Preloader加载动画对齐异常问题求助

问题描述 #

我使用以下Preloader加载动画代码，在三星等Android设备显示正常，但在iPhone 14等iOS设备中，字母“H”出现宽度对齐异常（动画表现为H的左右竖线宽度不一致、跳动错位）。尝试添加Meta标签、修改.svg-file.z-logo类添加display: flex; justify-content: center; align-items: center;属性后仍未解决。

解决方案 #

问题根源在于iOS Safari对SVG的transform缩放和stroke渲染的兼容性差异，以下是针对性修复方案：

修改后的CSS代码 #

/*--------------------------------------------------------------
# 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');

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

.svg-file.z-logo {
  width: 80vw; /* 放大容器替代SVG的scale变换 */
  max-width: 266px; /* 原尺寸133px的2倍 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-file.z-logo svg {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
  width: 100%; /* 让SVG自适应容器 */
  height: auto;
}

.svg-file path {
  fill: transparent;
  stroke-width: 3;
  stroke: rgb(1, 36, 133);
  vector-effect: non-scaling-stroke; /* 关键：防止缩放时stroke宽度变形 */
}

.svg-file.z-logo path {
  stroke-dasharray: 550;
  stroke-dashoffset: 0;
  animation: animate-zlogo 2s linear infinite;
}

.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;
    stroke-width: 3;
  }
  20% {
    stroke-dashoffset: 550;
    fill: transparent;
    stroke-width: 3;
  }
  40% {
    fill: transparent;
    stroke-dashoffset: 1100;
    stroke-width: 3;
  }
  60% {
    stroke-dashoffset: 1100;
    fill: #05f7f9;
    stroke-width: 3;
  }
  80% {
    stroke-width: 0;
    fill: #05f7f9;
  }
  100% {
    stroke-width: 3;
    fill: transparent;
  }
}

.z-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* iOS更稳定的居中方式 */
  background: black;
  border: 1px solid black;
  width: 60vw;
  max-width: 200px;
  height: 60vw;
  max-height: 200px;
}

修改后的HTML代码 #

<!-- Preloader -->
<div id="preloader">
  <div class="svg-file z-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 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>

关键修复点 #

• 替换SVG缩放方式：移除transform: scale(2)，通过放大容器尺寸实现放大效果，避免iOS对transform缩放SVG时的stroke渲染异常。
• 添加vector-effect: non-scaling-stroke：确保SVG的stroke宽度在缩放或变换时保持一致，不会因缩放变形。
• 修正绝对定位居中：将.z-logo::before的居中方式改为transform: translate(-50%, -50%)，比margin: auto在iOS上更稳定。
• 明确动画中的stroke-width值：在动画关键帧中统一指定stroke-width，避免iOS渲染时的不确定性。

内容的提问来源于stack exchange，提问作者user12929063