iPad Safari mobile seems to ignore z-indexing position for html5 video elements

ipad mobile-safari html5-video
Marek Maurizio picture Marek Maurizio · Sep 10, 2010 · Viewed 30.5k times · Source

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?

An image of the problem

Answer

JaffaTheCake picture JaffaTheCake · Feb 4, 2011

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.

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

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

Related questions

HTML5 Video tag not working in Safari , iPhone and iPad

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application …

Read More
Why Safari on iOS is not showing my HTML5 video poster?

I have this webpage: http://healthpad.net/dashboard/ It have 10 <video> elements on it. For some reason, when I load the page on an iPad, it is not showing the video posters. Try the following: load the page …

Read More
How can I recognize touch events using jQuery in Safari for iPad? Is it possible?

Is it possible to recognize touch events on the iPad's Safari browser using jQuery? I used mouseOver and mouseOut events in a web application. Are there any similar events for the iPad's Safari browser since there are no events like …

Read More