ios safari 不支持 appearance: none 作用于 audio 元素，因其 ua 样式表仅对 input 和 select 启用 appearance 控制；需通过伪元素覆盖、opacity 隐藏或完全自定义 ui 实现样式控制。
iOS Safari 完全不支持 appearance: none 作用于 audio 元素，硬加这行 CSS 没有任何效果，还可能干扰后续调试。
为什么直接写 appearance: none 在 iOS 上无效
iOS Safari 的 UA 样式表只对 <input> 和 <select></select> 启用 appearance 控制，<audio></audio> 被明确排除在外。Chrome for iOS 表现也不一致——它有时会渲染成细长条，有时又塞进下载图标，但同样无视 appearance。这意味着你不能靠“重置默认样式”起步，得从“覆盖”或“绕过”开始。
-
audio::-webkit-media-controls可隐藏控件面板，但仅限 WebKit 内核（Safari / Chrome iOS），且部分版本需配合audio::-webkit-media-controls-panel - 用
width/height+background盖住原生区域时，必须确保尺寸精准匹配，否则在不同 iOS 版本中易出现错位或残留边框 - 若用
display: none隐藏伪元素，可能触发 layout shift，造成视觉闪跳；推荐改用opacity: 0+pointer-events: none
如何防止 iOS 上的视觉闪跳
闪跳本质是样式加载时机晚于控件渲染：iOS Safari 先画出原生 UI，再应用你的 CSS，用户会看到“原生 → 空白 → 自定义”的三帧过程。关键不是写多酷的样式，而是控制加载节奏：
- 所有自定义样式规则（含伪元素选择器）必须放在
内的<style></style>中，不能外链延迟加载 - 初始 HTML 就要带好定制 class，例如
<audio class="audio-player--custom"></audio>，避免 JS 动态添加 class 触发重绘 - 为
audio::-webkit-media-controls-panel设置opacity: 0，而不是等 JS 初始化后再切换 class
用 Audio API + 自定义按钮替代原生 controls 的场景
当你需要进度条拖拽、倍速播放、歌词同步、或统一多端 UI 时，放弃 controls 属性是最可靠路径。此时 <audio></audio> 只做播放引擎，UI 完全由 <button></button>、<div> 和 CSS 构建：
<ul>
<li>移除 <code>controls 属性，否则 iOS 仍可能在某些上下文中强制显示原生控件（如页面失焦后返回）
timeupdate 更新自定义进度条宽度，注意 iOS 上该事件频率较低，需结合 requestAnimationFrame 平滑处理audio.play() 必须由用户手势触发（如 click），iOS 不允许静默自动播放，否则 Promise 会 reject容易被忽略的兼容细节
很多开发者卡在“样式写了但没生效”，问题常出在选择器权重或伪元素命名上：
-
audio::-webkit-media-controls在 iOS 16+ 已被部分废弃，更稳定的写法是audio::-webkit-media-controls-panel+audio::-webkit-media-controls-play-button等细分伪元素 - 使用
background-image替代原生按钮时，注意 iOS Safari 对 SVG 作为 background 的缩放支持不稳定，优先用内联 base64 或 PNG - 如果音频资源跨域，
audio.duration在 iOS 上可能始终为NaN，导致进度条无法初始化，需提前设置crossorigin="anonymous"
