如何解决iOS端点击展开details元素时背景色短暂闪变问题

这个毫秒级的背景闪烁和你之前覆盖的:focus/:hover/:active伪类无关，是iOS端WebKit内核的两个默认渲染逻辑导致的：

• 移动端Safari对所有可交互元素默认添加系统级半透明点击高亮层（tap highlight），点击触发时会覆盖在元素上层，默认是半透明灰色，持续百毫秒级
• <summary>作为原生交互控件，WebKit对其有内置的瞬态交互样式，常规伪类选择器无法命中这部分渲染逻辑，你之前的样式覆盖没有覆盖到WebKit私有渲染规则。

无需修改HTML结构，追加以下CSS规则即可完全消除闪烁：

/* 移除系统级点击高亮层 */
details, summary {
  -webkit-tap-highlight-color: transparent;
}

/* 移除WebKit原生summary控件的默认交互渲染干扰 */
summary {
  -webkit-appearance: none;
  appearance: none;
}

/* 覆盖所有WebKit私有的瞬态交互状态样式，避免属性切换间隙的样式空档 */
details:-webkit-any(:focus, :focus-visible, :target),
summary:-webkit-any(:focus, :focus-visible, :target) {
  background-color: inherit;
}

/* 可选：移除summary默认的展开标记，自定义箭头时使用，不影响闪烁修复
summary::-webkit-details-marker {
  display: none;
}
*/

• 之前给summary:active设置background: none无效的核心原因是：点击触发展开的过程中，浏览器会先给<details>元素添加open属性，再应用details[open] summary的样式，这两个步骤之间的几毫秒渲染间隙，会被WebKit的默认高亮层填充，才会出现非预期的颜色变化。
• 该方案对同类使用<details>实现折叠面板的场景（包括你提到的GitHub Copilot FAQ页、Spotify Duo套餐页的同类问题）均生效，不需要额外绑定JavaScript事件阻止默认行为。
• 如果需要保留自定义点击反馈，将-webkit-tap-highlight-color的transparent替换为你需要的高亮色值即可，不会再出现系统默认的灰色闪烁。

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