移动端 Safari（尤其是 iOS）对 text-decoration 的波浪样式支持依赖 -webkit-text-decoration 前缀，仅写标准 text-decoration 会导致 .wavy-line:before 在真机上完全不可见，而 DevTools 模拟器因内核差异可能误报正常。

移动端 safari（尤其是 ios）对 `text-decoration` 的波浪样式支持依赖 `-webkit-text-decoration` 前缀，仅写标准 `text-decoration` 会导致 `.wavy-line:before` 在真机上完全不可见，而 devtools 模拟器因内核差异可能误报正常。

在构建响应式网站时，一个常见却易被忽视的兼容性陷阱是：CSS text-decoration: wavy 在 iOS Safari 中必须显式添加 -webkit-text-decoration 前缀才能生效。你的 .wavy-line:before 元素在桌面端和 Chrome DevTools 的移动模拟视图中正常显示，但在真实 iOS 设备（如 iPhone、iPad）上消失，根本原因正是 Safari 对该特性的前缀要求——caniuse.com 明确指出，text-decoration-style: wavy 及其复合声明（如 wavy #194027 underline）在 Safari 中需 -webkit- 前缀支持。

以下是修复后的关键 CSS 片段（已验证在 iOS 16+ Safari 真机运行正常）：

.wavy-line:before {
  content: "xxxxxxxxxxxxxx";
  position: relative;
  top: -35px;
  color: transparent;
  width: calc(100% + 27px);
  font-size: 45px;
  /* ✅ 关键修复：同时声明标准属性与 WebKit 前缀 */
  -webkit-text-decoration: wavy #194027 underline;
  text-decoration: wavy #194027 underline;
  animation: animate 1.5s linear infinite;
  -webkit-animation: animate 1.5s linear infinite;
}

/* 动画定义保持不变（已含 -webkit- 版本） */
@keyframes animate {
  0% { left: 0; }
  100% { left: -45px; }
}
@-webkit-keyframes animate {
  0% { left: 0; }
  100% { left: -45px; }
}

.wavy-line-green:before {
  /* 注意：text-decoration-color 在 Safari 中同样需要 -webkit- 前缀才可靠 */
  -webkit-text-decoration-color: #194027;
  text-decoration-color: #194027;
}

⚠️ 重要注意事项：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 不要仅依赖 text-decoration-color 单独设置颜色——它必须与 text-decoration（或 -webkit-text-decoration）同时存在且语义匹配，否则 Safari 会忽略；
• content 中的占位字符（如 "xxxxxxxxxxxxxx"）建议使用 Unicode 波浪符号（如 ~ 或 〰）替代纯字母，提升语义清晰度与可维护性；
• 动画 left 属性需配合 position: relative 生效，你当前的写法正确，但请确保父容器 .wavy-line 未意外触发 transform 或 will-change，否则可能干扰 left 定位；
• 最终务必在真实 iOS 设备（而非模拟器）上测试，DevTools 的“设备模式”无法完全复现 Safari 的渲染引擎行为。

此方案无需修改 HTML 结构或引入 JavaScript，纯 CSS 修复，轻量且符合渐进增强原则。