Проблема с наложением 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 настольных устройств менее чем желательно...
4 ответов
это может быть связано с проблемой z-индекса. Попробуйте добавить эти строки в файл CSS:
.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}
Если я изменю 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');
}
я исправил эту проблему очень просто, изменив
.fancybox-inner {
overflow: hidden;
}
С
.fancybox-inner {
overflow: hidden;
zoom:1;
}
масштабирование: 1-это трюк css, который заставляет элемент всегда оставаться в фокусе и сверху.
это, похоже, не решается для всех.. То, что, по-видимому, происходит с fancybox на мобильном телефоне, divs не организованы правильно. Это можно исправить, добавив некоторые таблетки обнаружения:
var MOBILE = $('html').hasClass('touch');
var TABLET = (MOBILE && screen.width >= 768);
затем вы можете перемещать контейнеры вокруг, если вы обнаружите планшет:
if (TABLET) {
$( '.fancybox-overlay' ).insertBefore( $( '.fancybox-wrap' ) );
}
это, казалось, исправило проблему для меня. Надеюсь, это поможет кому-то еще!