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

Posted 2023-05-07

【中文标题】iPad Safari mobile 似乎忽略了 html5 视频元素的 z-indexing 位置

【英文标题】：iPad Safari mobile seems to ignore z-indexing position for html5 video elements

【发布时间】：2011-04-10 15:19:44

【问题描述】：

我在一个页面上获得了一个视频元素，该元素在 Safari 移动版和桌面版中都可以正常工作。 我有一个工作正常的半透明下拉菜单。问题是，当菜单在视频元素上方时，在桌面 Safari 上我可以看到菜单下的视频（根据需要），而在移动版本上，无论我说什么，视频元素都停留在前景（丑陋）的CSS。有什么解决办法吗？

【参考方案1】：

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

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

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

【讨论】：

我没有让这个工作；可以发个例子吗？

+1 你是对的！这只发生在动态创建的元素上。非常感谢你:)

您还必须让 html 属性“控件”不存在。看到这个issue。

我的视频不是动态创建的，仍然忽略它的 z-index。添加transform-style CSS 属性也无济于事。

可以确认它也发生在“静态”视频标签上，没有控件。一旦我取消静音我的自定义控件和视频后面的任何其他内容。 -webkit-transform-style 确实有帮助！

【参考方案2】：

很遗憾没有。

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

iPad 上的移动 Safari 为 Quicktime 窗口切了一个洞，该窗口使用内置硬件加速播放视频以延长电池寿命。 （iPhone 和 iPod Touch 只需在单独的窗口中打开即可达到相同的效果。）

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

【讨论】：

现在很伤心。打开菜单时，我将不得不停止并隐藏视频。这是一个丑陋的解决方法，让我们希望有人提出解决方案。无论如何，谢谢。

可以的。正如 Jaffa The Cake 所说，这件事只发生在动态插入的视频元素上

【参考方案3】：

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

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

我通过结合其他人回答这个问题的一些建议来修复它：我在打开菜单时设置了 visibility:hidden 和 visibility:关闭子菜单时可见，并在视频上设置 -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");
    
  );
);

【讨论】：

TROY 你是救生员！如果您遇到此问题，Troy 的答案就是答案：***.com/questions/9951463/…

感谢您的回答。我正在使用 MediaElement js 并遇到同样的问题。通过js在“可见”和“隐藏”之间切换视频的可见性后，我的无序显示问题就消失了（就我而言）:)

【参考方案4】：

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

【讨论】：

或者，您也可以使用-webkit-transform-style: preserve-3d

【参考方案5】：

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

这是唯一对我有用的东西。没有z-index，没有transform-style:preserve-3d。

【讨论】：

谢谢，您的回答确实节省了我的时间。我在 iOS14 上使用 Safari 手机。就我而言，我有一个以视频为背景的光滑，上面覆盖了一些 div。它静止时完美覆盖，但当我滑动光滑时，视频将覆盖那些 div。我将 -webkit-transform: translateZ(1px) 添加到这些 div 中，现在它很完美。

我也“迷失”了 8 小时试图找到修复 ?

【参考方案6】：

我也遇到了这个。我唯一能为我工作的就是添加

display:none

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

【参考方案7】：

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

将 Flowplayer 与 ipad 插件和控制栏插件一起使用，我可以删除 ipad 创建的控制栏，并将其替换为可以在我的模态窗口下方进行 z 索引的东西。

【参考方案8】：

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

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

【讨论】：

您还必须让 HTML 属性“控件”不存在。看到这个issue。

【参考方案9】：

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

我修复了我在菜单打开时将视频移动到其他位置的问题，方法是将其绝对定位在 -100000 像素，当菜单未显示时，它会将其设置为相对定位。

我发现使用 display none 不起作用，因为当您将其设置为再次阻止时，视频将不起作用。

我还尝试将高度设置为 0 - 这不起作用，因为即使您看不到视频，视频似乎仍会占用空间。

最终的方法看起来有点极端，但实际使用时并不明显。

【参考方案10】：

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

【参考方案11】：

今天刚遇到这个问题，不得不从多个答案中拼凑出一个解决方案，因为没有一个能完全解决这个问题......

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

解决此问题需要以下所有条件：

1) 使用这个：

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

... 似乎没有任何效果，但我还是把它留了下来。现在一切正常，所以我不想再搞砸了:)

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

3) 除了“可见性”之外，还必须动态添加/删除 HTML5 视频标签 controls 属性。要么：

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

4) 必须根据初始浏览器/屏幕大小设置文档加载的可见性/控件

5) 尽管主要关注的是 iPhone 的错误行为，但我还必须考虑响应窗口大小的变化，超过我的最小媒体查询断点 600 像素 - 否则视频会在错误的屏幕尺寸出现/消失。

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

解决本质上是一个愚蠢的移动 Safari 错误非常痛苦...我当然希望以后测试时它可以在 iPad 上运行...

【参考方案12】：

对于仍然遇到此问题的任何人，最终对我有用的另一个修复是更改嵌入代码中的选项，以不允许控件、建议的视频以及视频标题和播放器选项。我添加了一个简单的Modernizr.MQ 查询来更改平板电脑和移动设备的源代码，并将以下内容添加到移动设备的 iframe 源代码中：

?rel=0&controls=0&showinfo=0

我从来没有完全弄清楚为什么会这样，但我猜这些控件有一些用户代理风格，这给了它们一个高 z-index 并使元素位于一切之上。