ui-widget的奇怪css行为：在iPhone上有效

Question

情景：

• 标准推荐用于嵌入Vimeo和YouTube
的iframe
• 有人发现iPhone上的点击/触摸没有任何反应
• 已停用css和js，一切正常
• 经过一番挖掘后发现，如果禁用css .ui-widget :active { outline: none; }，一切都按预期工作。

这些页面上没有jquery-ui js所以没有.ui- *的元素。 如何删除甚至不应解析的css行会导致这种行为？

Answer 1

这个确切的情况也发生在我身上。 使用iframe嵌入YouTube视频。 例如：

<iframe class="media-youtube-player" width="510" height="290" src="{$url to youtube}" frameborder="0" allowfullscreen></iframe>

在ipad上的safari中，点击视频没有任何反应。 我也通过我的代码一分为二，发现从中删除此行 jquery.ui.theme.css：

.ui-widget :active { outline: none; }

修复了问题。

我也尝试将该行修改为：

.ui-widget :active {  }

这也会导致问题。这意味着选择器本身会破坏ipad中的视频。

我也尝试用.ui-widget :active替换:active选择器，这也是 导致视频无法播放。

所以，这是修复...删除那个选择器！

在.ui-widget内的有效元素上显示的大纲，您需要更具体地定位。