iphone - ui-widget 的奇怪 css 行为 :active on iPhone

Question

场景:

• 用于嵌入的标准推荐 iframe Vimeo和 YouTube
• 有人发现在 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 中的视频。

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

所以，这就是解决方法...删除那个选择器!

以及出现在 .ui-widget 内事件元素上的轮廓，您需要更具体地定位。