相关疑难解决方法(0)

这是我通过蛮力设法解决的错误,但我不明白为什么解决方案有效.

问题是嵌入式YouTube视频在横向视图中没有在iPad(在iOS7中测试)上的特定(响应)网站上工作.我设法将其缩小到特定的CSS规则,当浏览器足够宽时,它会在标题中显示搜索输入,因此它将显示在iPad的横向视图中,但不会显示在纵向视图中.

在稍微蛮力摆弄之后,我发现type="search"从输入标签中删除(导致它回落到默认值type="text")将解决问题.我的所有搜索都没有提出解释为什么这有效,或者甚至是其他任何经历过同样事情的人.

关于bug的更多细节

该网站的工作原理是首先显示图片,点击后可通过JavaScript替换YouTube iframe.在第一次点击之后,它将在桌面浏览器上自动播放,并且在iPad上它将加载视频但在用户再次按下它之前不会播放.

如果type="search"输入是可见的(display: block;),则点击嵌入的视频不会导致它播放; 水龙头没有明显的响应.如果我放大并点击顶部的控件,就像视频的名称一样,我可以看到它们被加下划线,测试显示没有元素覆盖iframe和拦截事件.

奇怪的是,点击iframe右侧的边缘会导致视频开始正​​常播放.否则,将iPad更改为纵向视图(导致通过CSS隐藏搜索输入)将启用iframe以便开始视频播放.在第一次单击之后,无论搜索输入是否显示,所有视频控件都将起作用.

所以，最近我一直在一个网站上工作，该网站让我改进和做出响应，我面临的问题之一是有许多可点击的元素，混合了 CSS 和悬停状态的 jQuery 效果。

现在，首先我希望所有这些悬停状态都是 CSS，但我遇到的主要问题是，在这些悬停状态下，某些元素display和visibilitycss 属性正在发生变化。我做了一些阅读，显然如果是这种情况，在触摸屏 iOS 设备上，这会导致第一次“触摸”强制悬停状态，然后需要第二次单击才能实际单击元素。

我试图找到一种不需要大量标记和样式更改的解决方案。最好是利用 jQuery/JavaScript 的修复程序会很好。

我尝试了以下方法：

$(document).ready(function() {
   $('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });
});

但是，当用户将手指按住可点击元素并拖动页面进行滚动时，这会出现问题。当他们在拖动后松开手指时，window.location仍然会改变。

如有必要，我稍后会添加一个 jsFiddle。

提前致谢。

编辑：

这是一个显示问题的 jsFiddle。http://jsfiddle.net/0bj3uxap/4/ 如果您点击其中一个块，您会看到它显示悬停状态，然后您需要再次点击以实际触发点击事件。

当一个元素被隐藏，然后悬停状态显示该元素时，似乎会发生这种情况。