iPad的Safari手机似乎忽略了HTML5video元素的Z-indexing位置
我在Safari浏览器的移动设备和桌面设备上都能看到一个video元素。 我有一个seme-transparent下拉菜单，工作正常。 问题是，当菜单是在video元素上，在桌面Safari浏览器，我可以看到菜单（根据需要）下的video，而在移动版本的video元素留在前台（丑陋），无论我告诉css。 有没有解决办法？
只有在dynamic创buildvideo元素时才会出现问题。 如果元素刚好在加载的页面中，则z-index可以正常工作。
您可以通过给video元素-webkit-transform-style: preserve-3d修复dynamic创build的video上的z-index。
是的，它和IE上的布局一样糟糕！
不幸的是，
根据我对iOS目前工作的经验和理解，这是不可能的。
iPad上的移动Safari为Quicktime窗口打了一个洞，它使用内置硬件加速来播放video，以延长电池寿命。 （iPhone和iPod Touch只需在单独的窗口中打开即可达到相同的效果。）
这个窗口不能很好的与页面上的其他HTML一起玩。 事实上，我还没有find一种方法让移动Safari浏览器在标签上显示任何内容。 我的猜测是，这是因为硬件加速只允许video缩放和定位，而且一次只能处理一个video。
我使用stream水游戏和一个简单的CSS下拉菜单，并有同样的问题。
我有下拉菜单，当点击时，覆盖部分video区域。 子菜单按预期在video上显示，但没有发送触摸事件。
我通过结合来自其他人的一些build议来解决这个问题：我设置可见性：当打开菜单和可见性时隐藏 ：在closures子菜单时可见 ，并设置-webkit-transform-style： preserve-3d CSS属性video。
这是相关的代码。 我省去了菜单栏的CSS，但是它可以做到你所期望的 – 从而产生一个覆盖video部分的菜单。
菜单和videoHTML
<div id='nav'> <ul> ... <!-- bunch of ul/li stuff here for the menu and submenus --> </ul> </div> <div id='videoplayer'><!-- for flowplayer --></div>
CSS
video { -webkit-transform-style: preserve-3d; }
使用Javascript
$(document).ready(function(){ $("#nav li").hover( function() { $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300); $("video").css({visibility:"hidden"}); }, function(){ $(this).find('ul:first').css({visibility: "hidden"}); $("video").css({visibility:"visible"}); } ); );
我设法在iPad上的移动Safari浏览器中的html5video标签上放置一个菜单div。 说实话，我没有任何问题，只是工作。 这可能是因为我使用CSS3animation，因此GPU？ 你可以尝试使用黑客来添加一个元素到GPU。 如果你把-webkit-transform: translateZ(0); 在元素上，它应该强制它使用GPU …
我也遇到了这个。 我唯一能为我工作的就是补充
display:none
当显示一个div需要点击时，video标签。
-webkit-transform-style:preserve-3d和-webkit-transform:translateZ(0)对我不起作用。
使用Flowplayer与ipad插件和控制栏插件允许我删除ipad创build的控制栏，并replace为可以在我的模态窗口以下z-indexed的东西。
您可以通过给video元素-webkit-transform-style: preserve-3d修复dynamic创build的video上的z-index 。
这对我来说是一个dynamic创build的video元素。 我也把覆盖div的z-index: 888;设置为z-index: 888; 这也可能有所帮助。
我遇到了这个问题，这是在移动设备上出现的canvas菜单。 当菜单在video上时，您无法点按任何菜单项。
我把它固定在菜单开启的时候，我把video移到其他地方，当菜单没有显示时，它将它定位在-100000px的位置上，它将它放回相对的位置。
我发现使用显示器没有工作，因为当你设置它再次阻止video将无法正常工作。
我也尝试将高度设置为0 – 这不起作用，因为即使看不到它，video仍占用了空间。
最后的方法似乎有点极端，但它使用时并不是很明显。
这是可以在iPad和iPhone上运行的代码。 我试图删除控件，然后再次添加它们，但是这仅适用于iPad而不是iPhone。 删除不透明度，然后再添加它也在iPhone上工作。
$("#overlay_open").click(function(){ $("video").prop("controls", false); $("video").css("opacity", 0); }); $("#overlay_close").click(function(){ $("video").prop("controls", true); $("video").css("opacity", 1); });
刚刚遇到这个问题，并不得不拼凑一个从多个答案的解决scheme，因为没有完全处理这个问题…
我有一个折叠的“表视图”样式列表中的video元素，当试图在其他列表项上点击时捕获iPhone上的触摸事件。 在iPhone上，video将在点击其他折叠元素时发挥作用，这些元素恰好占据了屏幕上的相同位置。
解决这个问题需要所有以下内容：
1）使用这个：
video{ -webkit-transform-style: preserve-3d; }
…似乎没有任何影响，但我仍然留下它。 一切正在工作，所以我不想再拧它:)
2）切换visibility: hidden单独visibility: hidden不起作用，并display:none没有按预期工作。
3）除了“可视性”，HTML5video标签controls属性还必须dynamic添加/删除。 或者：
$("video").css({visibility:"hidden"}).removeAttr("controls"); 或$("video").css({visibility:"visible"}).attr("controls", "controls");
4）必须根据初始浏览器/屏幕大小设置对文档加载的可视性/控制
5）虽然主要担心的是iPhone的行为，但我还必须考虑响应窗口大小的变化超过我的最小媒体查询断点600px – 否则video将出现/消失在错误的屏幕尺寸。
$(window).resize(function(){ if ($(window).width() > 600){ $("video").css({visibility:"visible"}).attr("controls", "controls"); } });
解决这个本质上是一个愚蠢的移动Safari浏览器错误是一个痛苦…我当然希望它能在iPad上运行，当我testing它以后…
对于遇到这个问题的任何人来说，另一个最终解决问题的方法是更改embedded代码中的选项，以禁止控件，推荐的video以及video标题和播放器选项。 我添加了一个简单的Modernizr.MQ查询来更改平板电脑和移动设备的src，并将以下内容添加到移动设备的iframe src中：
？相对= 0对照= 0＆showinfo = 0
我从来没有完全追踪过这个原因，但是我的猜测是这些控件有一些用户代理风格，它们给了他们一个很高的z-index，并且让这个元素处于一切之上。
