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

Question

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 t

Answer 1

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!

Answer 2

Just ran into this issue today & had to cobble together a solution from multiple answers since none fully handled the problem ...

I have video elements in a collapsed "table view" style list that were capturing touch events on iPhone when trying to tap on other list items. On iPhone the videos would play when tapping other collapsed elements that happened to be occupying the same spot on screen.

Fixing this required all of the following:

1) Using this:

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

... didn't seem to have any effect, but I left it in anyway. Everything's working now so I don't want to screw with it further :)

2) Toggling visibility: hidden alone didn't work, and display:none didn't work as expected.

3) In addition to "visibility" the HTML5 video tag controls attribute also has to be added/removed dynamically. Either:

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

4) Must set visibility/controls on document load based on initial browser/screen size

5) Although the main concern was the screwy iPhone behavior, I also had to account for responsive window size changes above my smallest media query breakpoint of 600px - otherwise the videos would appear/disappear at the wrong screen sizes.

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

Quite a pain to work around what's essentially a stupid mobile Safari bug... I sure hope it works on iPad when I test it later...

Answer 3

I have managed to place a menu div over a html5 video tag in mobile-safari on the ipad. To be honest I didn't have any problems and it just worked. It could be though because I was using CSS3 animations and therefore the GPU? You could try using a hack to add an element to the GPU. If you put -webkit-transform: translateZ(0); on the element it should force it to use the GPU...

Answer 4

This is the code that will work on both the iPad and iPhone. I tried removing the controls and then add them again, but this worked only on iPad not on iPhone. After remove the opacity and then add it again it worked on iPhone also.

$("#overlay_open").click(function(){
  $("video").prop("controls", false);
  $("video").css("opacity", 0);
});

$("#overlay_close").click(function(){
  $("video").prop("controls", true);
  $("video").css("opacity", 1);
});

Answer 5

I'm using flowplayer and a simple CSS dropdown menu and had the same problem.

I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.

I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.

Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.

menu and video 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 6

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

This worked for me with a dynamically created video element. I also set the z-index of the over-laying div to z-index: 888; which may also have helped.