iphone - 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 :activejust 替换选择器:active，这也会导致视频无法播放。

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

出现在.ui-widget您内部活动元素上的轮廓需要更具体地定位。