iPad Safari mobile似乎忽略了html5视频元素的z-indexing位置

Question

我在一个页面上有一个视频元素，可以在Safari手机和桌面游戏中正常运行。 我有一个透明的下拉菜单，工作正常。问题是，当菜单在视频元素上时，在桌面游戏中我可以看到菜单下的视频（根据需要），而在移动版本上，视频元素保持在前景（丑陋），无论我告诉什么css。有没有解决方法？

Answer 1

仅在动态创建视频元素时才会出现此问题。如果元素在加载时只在页面中，z-index工作正常。

您可以通过提供视频元素-webkit-transform-style: preserve-3d来修复动态创建的视频的z-index。

是的，它和IE上的haslayout一样糟糕！

Answer 2

不幸的是没有。

根据我对iOS目前工作方式的经验和理解，这是不可能的。

iPad上的Mobile Safari为Quicktime窗口打开了一个漏洞，该窗口使用内置的硬件加速功能播放视频以延长电池续航时间。 （iPhone和iPod Touch只需在单独的窗口中打开即可达到同样的效果。）

此窗口与页面上的其他HTML无法很好地匹配。事实上，我还没有办法让移动版Safari在标签上显示任何内容。我的猜测是，这是因为硬件加速仅允许视频缩放和定位，并且它一次只能处理一个视频。

Answer 3

我正在使用flowplayer和一个简单的CSS下拉菜单，并遇到了同样的问题。

我有一个下拉菜单，当点击时，会覆盖部分视频区域。子菜单按预期显示在视频上，但未发送任何触摸事件。

我通过结合其他人回答此问题的一些建议来解决这个问题：打开菜单时我设置了可见性：隐藏 并且可见性：关闭子菜单时可见 ，并在视频上设置 -webkit-transform-style： preserve-3d CSS属性。

这是相关的代码。我遗漏了菜单栏的CSS，但是它可以达到您所期望的效果 - 从而产生一个覆盖部分视频的菜单。

菜单和视频HTML

<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"});
    }
  );
);

Answer 4

我已经设法在ipad上的mobile-safari中的html5视频标签上放置一个菜单div。说实话，我没有任何问题，只是工作。可能是因为我使用CSS3动画，因此使用GPU？您可以尝试使用hack向GPU添加元素。如果你将-webkit-transform: translateZ(0);放在元素上，它应该强制它使用GPU ......

Answer 5

-webkit-transform-style:preserve-3d和-webkit-transform:translateZ(0)对我不起作用。

使用带有ipad插件和控制栏插件的Flowplayer允许我删除ipad创建的控制栏，并将其替换为可以在我的模态窗口下方进行z索引的内容。

Answer 6

我也碰到了这个。我唯一可以为我工作的是添加

display:none

在显示需要点击的div时显示视频标记。

Answer 7

您可以通过提供视频元素z-index来修复动态创建的视频-webkit-transform-style: preserve-3d。

这对我来说是一个动态创建的视频元素。我还将覆盖div的z-index设置为z-index: 888;，这也可能有所帮助。

Answer 8

我遇到了这个问题，这个问题发生在带有非画布菜单的移动设备上。当菜单在视频上时，您无法点击任何菜单项。

我修复了我在菜单打开时将视频移动到其他位置时将菜单显示在-100000px，当菜单未显示时将其设置为相对定位。

我发现使用display none无法正常工作，因为当你将其设置为再次阻止视频无效时。

我也尝试将高度设置为0 - 这不起作用，因为即使你看不到它，视频仍然占据了空间。

最后的方法看起来有点极端，但在使用它时并不是很明显。

Answer 9

这是适用于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);
});

Answer 10

今天刚遇到这个问题＆amp;不得不拼凑出多个答案的解决方案，因为没有人完全解决问题......

我在折叠的＆＃34;表视图中有视频元素＆＃34;在尝试点击其他列表项时在iPhone上捕获触摸事件的样式列表。在iPhone上，当点击恰好占据屏幕上相同位置的其他折叠元素时，视频将播放。

解决此问题需要以下所有内容：

1）使用：

video{
    -webkit-transform-style: preserve-3d;
  }

......似乎没有任何效果，但无论如何我都把它留了下来。现在一切都在工作，所以我不想进一步搞砸它：）

2）单独切换visibility: hidden并不起作用，display:none没有按预期工作。

3）除了＆＃34;可见性＆＃34;还必须动态添加/删除HTML5视频标记controls属性。之一：

$("video").css({visibility:"hidden"}).removeAttr("controls");或$("video").css({visibility:"visible"}).attr("controls", "controls");

4）必须根据初始浏览器/屏幕尺寸设置文档加载的可见性/控制

5）虽然主要关注的是iPhone行为的棘手问题，但我还必须将响应窗口大小的变化考虑在我最小的600px媒体查询断点之上 - 否则视频会在错误的屏幕尺寸下出现/消失。

$(window).resize(function(){
    if ($(window).width() > 600){
        $("video").css({visibility:"visible"}).attr("controls", "controls");
    }
});

很难解决什么本质上是一个愚蠢的移动Safari漏洞...我确信希望它能在iPad上运行，我稍后再测试......

Answer 11

对于任何遇到此问题的人来说，另一个最终为我工作的修复方法是更改​​嵌入代码中的选项，以禁止控件，建议的视频以及视频标题和播放器选项。我添加了一个简单的Modernizr.MQ查询来更改平板电脑和移动设备的src，并将以下内容包含在移动设备的iframe src中：

相对= 0安培;对照= 0＆安培; showinfo = 0

我从来没有完全理解为什么会这样，但我的猜测是控件有一些用户代理样式，它们给了他们一个高z-index并使元素位于所有东西之上。

Answer 12

在Safari中，有一个元素要放在<video>的前面时，您需要将transform: translateZ(1px)或更多像素设置到该元素中，因为Safari会将{{1 }}元素的Z轴（<video>）值为0。

这是它对我唯一起作用的。没有transform: translateZ(0)，没有z-index。