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

问题描述

我在一个页面上有一个视频元素，可以在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.

你可以修复z - 通过提供视频元素来动态创建视频的索引 -webkit-transform-style：preserve-3d 。

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 mobile似乎忽略了html5视频元素的z-indexing位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！