移动端（尤其是 iOS Safari）不支持标准 text-decoration: wavy，需添加 -webkit-text-decoration 前缀才能正确渲染波浪线装饰效果。

移动端（尤其是 ios safari）不支持标准 `text-decoration: wavy`，需添加 `-webkit-text-decoration` 前缀才能正确渲染波浪线装饰效果。

在构建响应式网站时，一个常见却容易被忽视的问题是：某些 CSS 特性在桌面端 DevTools 模拟的移动视口下能正常显示，但在真实移动设备（尤其是 iOS Safari）上却完全不可见。你遇到的 .wavy-line:before 伪元素波浪线消失，正是典型的表现——根本原因在于 text-decoration: wavy 在 Safari（包括 iOS 16+）中尚未实现无前缀的原生支持，必须显式声明 -webkit-text-decoration。

✅ 正确写法：双前缀保障兼容性

只需在原有 CSS 的 .wavy-line:before 规则中，同时声明标准属性与 WebKit 前缀版本：

.wavy-line:before {
  content: "xxxxxxxxxxxxxx";
  position: relative;
  top: -35px;
  color: transparent;
  width: calc(100% + 27px);
  font-size: 45px;
  /* 关键修复：添加 -webkit-text-decoration */
  -webkit-text-decoration: wavy #194027 underline;
  text-decoration: wavy #194027 underline;
  animation: animate 1.5s linear infinite;
  -webkit-animation: animate 1.5s linear infinite;
}

? 验证依据：通过 caniuse.com/text-decoration 可查到，text-decoration: wavy 在 Safari 中仍需 -webkit- 前缀（截至 Safari 17.5），而 iOS 所有版本均基于 WebKit 内核，因此该前缀必不可少。

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

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

下载

⚠️ 注意事项与优化建议

• 不要仅依赖 text-decoration-color：.wavy-line-green:before { text-decoration-color: #194027; } 仅设置颜色，但若基础 text-decoration 未生效，颜色也无从渲染。务必确保 text-decoration（含 -webkit- 版本）已完整声明。
• position: relative + left 动画需谨慎：当前动画使用 left 移动，但伪元素默认为 static 定位，left 不生效。更稳妥的做法是将 position: relative 改为 position: absolute，并配合 top/left 精确控制；或改用 transform: translateX() 实现硬件加速动画：

  @keyframes animate {
    0% { transform: translateX(0); }
    100% { transform: translateX(-45px); }
  }

• 字体大小与内容长度需匹配：content: "xxxxxxxxxxxxxx" 使用重复字母模拟波浪，其可视宽度受 font-size 和字体度量影响。在小屏设备上建议结合 @media (max-width: 768px) 适当减小 font-size（如 32px）并调整 width: calc(100% + 15px)，避免截断或溢出。

✅ 最终验证步骤

1. 在真实 iOS 设备（iPhone/iPad）的 Safari 中访问页面；
2. 检查开发者工具（通过 macOS Safari 连接 iOS 设备远程调试）确认 :before 元素是否渲染且 text-decoration 属性已应用；
3. 若仍不显示，请检查父容器 .wavy-line 是否因 overflow: hidden 裁剪了伪元素（可临时设 border: 1px solid red 辅助定位）。

遵循以上修复方案后，波浪线将在所有主流移动端浏览器（iOS Safari、Chrome for Android）中稳定呈现，真正实现跨设备一致性。