Fancybox superposition de problème sur ipad/iphone

Sur ipad /iphone, la superposition apparaît sur le haut des médias dans la fancybox, c'est l'ensemble de la page est remplie avec la superposition y compris le contenu de fancybox. Des idées comment je peux résoudre ce problème?

Aussi, j'ai jwplayer de travail dans la fancybox la lecture de vidéos à l'aide de html5, au lieu de Flash, mais le problème, c'est la superposition figurant en haut de la vidéo, de sorte que quand je touche le bouton de lecture, fancybox s'en va...

Voir ma précédente question sur mon de la mise en œuvre de jwplayer dans fancybox pour ios à jwplayer dans fancybox ne pas jouer sur ipad/iphone

EDIT:

Intéressant, si j'en commentaire ce bloc de css, je peux cliquer sur le fancybox vidéo sur un ipad sans qu'il s'en aller et de jouer la vidéo:

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 9999;
background: url('fancybox_overlay.png');
}

Tandis que fancybox travaille ensuite sur OK sur iPhone et iPad, l'écran de fancybox d'équipements de bureau est moins désirable...

Cela se passera dans les navigateurs sur un PC (Internet Explorer, Firefox, Chrome)?
Non, uniquement sur ios
Voir groups.google.com/forum/?fromgroups=#!topic/fancybox/... pour des exemples de ce que je vois

OriginalL'auteur IlludiumPu36 | 2013-02-14

11

Il peut m'due à z-index problème. Essayez d'ajouter ces lignes à la dernière du fichier CSS :
```
.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}
```
A cela, mais pas de différence. Comment pourrais-je enlever la surcouche tout à fait dans le css?
J'ai commenté background: url('fancybox_overlay.png'); qui a supprimé la superposition...mais en touchant le bouton de lecture pour une vidéo en fancybox encore cloeses fancybox...à l'aide de fermercliquez: false, ne pas faire de differennce sur l'ipad.
Ajouter à ce dernier de le fichier CSS #fancybox-overlay{display:none!important}
Ne fonctionne pas pour moi.
En forçant un z-index avec un arbitraire haut de l'empilement de l'indice comme .fancybox-wrap{z-index:99999 !important} n'est pas vraiment une bonne pratique. Je recommande fortement la lecture de cet article: css-tricks.com/rational-z-index-values qui a discuté de cette mauvaise stratégie de développement dans le détail. Dans la pratique, vous devriez toujours comprendre le rationnel limite de ce qui est nécessaire pour procéder à l'incrémentation dans les limites normatives de l'ordinaire DOM l'empilement de régime.

OriginalL'auteur Mandeep Pasbola
7

Si je change le css, jquery.fancybox.css pour la suite, tout est très bien sur le bureau et les appareils ios:
```
.fancybox-overlay {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
/*    z-index: 9999;*/
background: url('fancybox_overlay.png');
}
```
Note à soi-même et les futurs utilisateurs: Notez le changement de position, le type ainsi que le commentaire de la z-index.
Ne fonctionne pas pour moi.

OriginalL'auteur IlludiumPu36
1

J'ai résolu ce problème très simplement en changeant
```
.fancybox-inner {
    overflow: hidden;
}
```
avec
```
.fancybox-inner {
    overflow: hidden;
    zoom:1;
}
```
le zoom : 1 est un css truc que les forces de l'élément de toujours rester dans l'accent et sur le dessus.

OriginalL'auteur Hugo St-Arnaud
0

Cela ne semble pas être résolu pour tout le monde.. Ce qui semble se passer avec fancybox sur mobile est les divs sont pas placées correctement. Ceci peut être corrigé par l'ajout de certains tablet détection:
```
var MOBILE = $('html').hasClass('touch');
var TABLET = (MOBILE && screen.width >= 768);
```
Ensuite, vous pouvez déplacer les contenants si vous détectez une tablette:
```
if (TABLET) {
    $( '.fancybox-overlay'  ).insertBefore( $( '.fancybox-wrap' ) );
}
```
Cela semble résoudre le problème pour moi. Espérons que cela aide quelqu'un d'autre!

OriginalL'auteur Trevor Lundeen

Vous devez vous connecter pour publier un commentaire.