iPad Safari 移动版似乎忽略了 html5 视频元素的 z 索引位置 [英] iPad Safari mobile seems to ignore z-indexing position for html5 video elements

问题描述

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

I got a video element on a page that's working fine both in safari mobile and desktop. I have a seme-transparent pull-down menu that's working fine. The problem is, when the menu is over the video element, on the desktop safari i can see the video under the menu (as desired), while on the mobile version the video element stay on the foreground (ugly) no matter what i tell the css. Is there any workaround?

推荐答案

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

The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.

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

You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.

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

Yep, it's as bad as haslayout on IE!

这篇关于iPad Safari 移动版似乎忽略了 html5 视频元素的 z 索引位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！