Проблема с наложением Fancybox на ipad/iphone

на ipad / iphone наложение появляется поверх медиа в fancybox, то есть вся страница заполнена наложением, включающим содержимое fancybox. Есть идеи, как это исправить?

кроме того, у меня есть jwplayer, работающий в fancybox, воспроизводящий видео с помощью html5, а не Flash, но проблема заключается в наложении, появляющемся поверх видео, так что, когда я касаюсь кнопки воспроизведения, fancybox уходит...

см. мой предыдущий вопрос о моей реализации jwplayer в fancybox для ios на jwplayer в fancybox не играет на ipad / iphone

EDIT:

интересно, что если я прокомментирую этот блок css, я могу нажать на видео fancybox на ipad без его ухода и воспроизвести видео:

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

в то время как fancybox затем работает нормально на iPhone и iPad, отображение fancybox настольных устройств менее чем желательно...

9
fancybox fancybox-2 jquery jwplayer

4 ответов

это может быть связано с проблемой z-индекса. Попробуйте добавить эти строки в файл CSS:

.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}
11

Если я изменю css в jquery.fancybox.css к следующему, все в порядке на настольных и ios-устройствах:

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

я исправил эту проблему очень просто, изменив 

.fancybox-inner {
    overflow: hidden;
}

С

.fancybox-inner {
    overflow: hidden;
    zoom:1;
}

масштабирование: 1-это трюк css, который заставляет элемент всегда оставаться в фокусе и сверху.

1

это, похоже, не решается для всех.. То, что, по-видимому, происходит с fancybox на мобильном телефоне, divs не организованы правильно. Это можно исправить, добавив некоторые таблетки обнаружения:

var MOBILE = $('html').hasClass('touch');
var TABLET = (MOBILE && screen.width >= 768);

затем вы можете перемещать контейнеры вокруг, если вы обнаружите планшет:

if (TABLET) {
    $( '.fancybox-overlay'  ).insertBefore( $( '.fancybox-wrap' ) );
}

это, казалось, исправило проблему для меня. Надеюсь, это поможет кому-то еще!

0