这是一个我用暴力解决的bug,但我不明白为什么这个解决方案会起作用。
问题是嵌入式YouTube视频无法在iPad (在iOS7中测试)上的特定(响应式)站点上运行。我设法将它缩小到一个特定的CSS规则,当浏览器足够宽时,它会在页眉中显示搜索输入,这样它就会显示在iPad的横向视图中,而不是纵向视图中。
经过更多的暴力摆弄之后,我发现从输入标记中删除type="search"
(这会导致它回落到默认的type="text"
)可以解决这个问题。然而,我的搜索都没有给出为什么这样做的解释,甚至没有任何其他人经历过同样的事情。
关于bug的更多细节
该网站的工作方式是首先显示一个图像,当单击时,该图像将通过JavaScript替换为YouTube iframe。第一次点击后,它会在桌面浏览器上自动播放,在iPad上它会加载视频,但直到用户再次按下它才能播放。
如果type="search"
输入可见(display: block;
),则轻触嵌入的视频不会使其播放;轻触不会有明显的响应。如果我放大并点击顶部的控件,就像视频的名字一样,我可以看到它们被加了下划线,测试显示没有覆盖iframe和截取事件的元素。
奇怪的是,点击iframe右侧的边缘会导致视频开始正确播放。否则,将iPad更改为肖像视图(导致搜索输入通过CSS隐藏)将使iframe能够被单击以开始视频播放。在第一次单击之后,无论搜索输入是否显示,所有视频控件都将工作。
发布于 2015-04-21 22:56:19
刚刚亲身体验到了这一点,并想为你写下这篇文章增加我的赞誉。你的问题,即使没有答案,也为我指明了正确的方向。
在我的案例中,这与Youtube无关。我有一个由Drupal在一个大型站点中生成的页面,在该页面中,整个站点的搜索机制使用了一个自动完成的drupal模块,该模块将type="search"
作为主输入类型。
在IOS中,用户反映Facebook、Twitter和Google Plus各自的“喜欢”按钮都不起作用,页面中嵌入了一个更大的angular应用程序。他们都使用iframe,而且似乎没有一个人对点击做出反应。
将这个看似无害、无关的输入类型从search
更改为text
,立即解决了这个问题。
令人费解。
https://stackoverflow.com/questions/19507930
复制相似问题