L'iPad Safari mobile semble ignorer la position de l'indexation z pour les éléments vidéo html5.

Question

J'ai un élément vidéo sur une page qui fonctionne bien à la fois dans Safari Mobile et Desktop. J'ai un menu déroulant semi-transparent qui fonctionne bien. Le problème est que, lorsque le menu se trouve au-dessus de l'élément vidéo, sur le safari de bureau, je peux voir la vidéo sous le menu (comme souhaité), tandis que sur la version mobile, l'élément vidéo reste au premier plan (laid), quoi que je dise à la css. Existe-t-il une solution de contournement ?

Answer 1

Le problème ne se produit que si l'élément vidéo a été créé dynamiquement. Si l'élément se trouvait juste dans la page lors de son chargement, z-index fonctionne bien.

Vous pouvez fixer le z-index sur les vidéos créées dynamiquement en donnant à l'élément vidéo -webkit-transform-style: preserve-3d .

Yep, c'est aussi mauvais que haslayout sur IE !

Answer 2

Malheureusement non.

D'après mon expérience et ma compréhension du fonctionnement actuel d'iOS, ce n'est pas possible.

Mobile Safari sur l'iPad fait place à une fenêtre Quicktime, qui lit la vidéo en utilisant l'accélération matérielle intégrée pour améliorer l'autonomie de la batterie. (Sur l'iPhone et l'iPod Touch, il suffit de l'ouvrir dans une fenêtre séparée pour obtenir le même effet).

Cette fenêtre ne s'harmonise pas avec les autres éléments HTML de la page. En fait, je n'ai pas trouvé de moyen pour que Safari mobile affiche quoi que ce soit au-dessus d'une balise. Je pense que c'est parce que l'accélération matérielle ne permet que la mise à l'échelle et le positionnement des vidéos, et qu'elle ne peut gérer qu'une seule vidéo à la fois.

Answer 3

J'utilise flowplayer et un simple menu déroulant CSS et j'ai eu le même problème.

J'ai un menu déroulant qui, lorsqu'on le touche, couvre une partie de la zone vidéo. Le sous-menu s'affiche sur la vidéo comme prévu, mais aucun événement tactile n'est envoyé.

Je l'ai corrigé en combinant quelques suggestions d'autres personnes ayant répondu à cette question : J'ai mis visibilité : caché lors de l'ouverture du menu et visibilité : visible lors de la fermeture du sous-menu, ET définir le -webkit-transform-style : préserver-3d Propriété CSS sur la vidéo.

Voici le code pertinent. J'ai laissé de côté le CSS de la barre de menu, mais il fait ce à quoi on peut s'attendre - ce qui donne un menu qui couvre des parties de la vidéo.

menu et vidéo 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 4

J'ai réussi à placer un menu div sur une balise vidéo html5 dans mobile-safari sur l'ipad. Pour être honnête, je n'ai eu aucun problème et cela a simplement fonctionné. C'est peut-être parce que j'utilisais des animations CSS3 et donc le GPU ? Vous pourriez essayer d'utiliser un hack pour ajouter un élément au GPU. Si vous mettez -webkit-transform: translateZ(0); sur l'élément, cela devrait le forcer à utiliser le GPU...

Answer 5

-webkit-transform-style:preserve-3d y -webkit-transform:translateZ(0) n'a pas fonctionné pour moi.

L'utilisation de Flowplayer avec le plugin ipad et le plugin controlbar m'a permis de supprimer la barre de contrôle créée par l'ipad et de la remplacer par quelque chose qui peut être z-indexé sous mes fenêtres modales.