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

Question

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

Answer 1

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

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

是的,它和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

当您希望<video>在 Safari 中将某个元素置于其前面时，您需要在该元素中设置一个transform: translateZ(1px)或多个像素，因为 Safari 正在为您的<video>元素设置 Z 轴 ( ) 的 0 值transform: translateZ(0)。

这是唯一对我有用的事情。不z-index，不transform-style:preserve-3d。

Answer 5

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