移动端（尤其是 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 前缀版本：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.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 内核，因此该前缀必不可少。
⚠️ 注意事项与优化建议
-
不要仅依赖
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)，避免截断或溢出。
✅ 最终验证步骤
- 在真实 iOS 设备（iPhone/iPad）的 Safari 中访问页面；
- 检查开发者工具（通过 macOS Safari 连接 iOS 设备远程调试）确认
:before元素是否渲染且text-decoration属性已应用； - 若仍不显示，请检查父容器
.wavy-line是否因overflow: hidden裁剪了伪元素（可临时设border: 1px solid red辅助定位）。
遵循以上修复方案后，波浪线将在所有主流移动端浏览器（iOS Safari、Chrome for Android）中稳定呈现，真正实现跨设备一致性。
