Fancybox problem nakładki na iPad/iPhone

na iPad/iPhone, nakładka pojawia się na górnej części mediów w Fancybox, że jest cała strona jest wypełniona nakładki incuding zawartość Fancybox. Jakieś pomysły, jak to naprawić?Fancybox problem nakładki na iPad/iPhone

Mam też jwplayera pracującego w fancyboksie, który odtwarza wideo przy użyciu html5, zamiast Flasha, ale problemem jest nakładka pojawiająca się w górnej części wideo, więc gdy dotknę przycisku odtwarzania, fancybox zniknie ...

Zobacz moje wcześniejsze pytanie na mojej realizacji jwplayer w Fancybox dla iOS w jwplayer in fancybox not playing on ipad/iphone

EDIT:

co ciekawe, jeśli I ustosunkowania się ten blok css, mogę kliknąć na wideo fancybox na zasadzie ipad bez odchodzenia i pla y wideo:

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

Podczas Fancybox następnie działa OK na iPhone i iPad, wyświetlacz Fancybox urządzeń stacjonarnych jest mniej niż pożądane ...

Źródło

2013-02-14 IlludiumPu36

Czy to również zdarzyć w przeglądarkach na komputerze (Internet Explorer, Firefox, Chrome)? – Uooo

Nie, tylko na iOS – IlludiumPu36

Zobacz https://groups.google.com/forum/?fromgroups=#!topic/fancybox/oUnAPbTisfY przykłady tego, co widzę – IlludiumPu36

Gdybym zmienić css w jquery.fancybox.css do następujących, wszystko jest w porządku na urządzeniach stacjonarnych i iOS:

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

Źródło

2013-02-14 08:47:18 IlludiumPu36

Uwaga dla siebie i przyszłych użytkowników: Zwróć uwagę na zmianę typu pozycji oraz komentowanie indeksu Z. – mindtonic

Nie działa dla mnie. –

To może mnie z powodu problemu z-index. Spróbuj dodać te linie na koniec pliku CSS:

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

Źródło

2013-02-14 06:19:56

Czy to jednak żadnej różnicy. Jak mogę usunąć nakładkę w całości w css? – IlludiumPu36

Skomentowałem tło: url ("fancybox_overlay.png"); który usunął nakładkę ... ale dotykanie przycisku odtwarzania wideo w fancybox wciąż zamyka fancybox ... używając closeClick: false, nie ma żadnej różnicy na iPadzie. – IlludiumPu36

Dodaj to na końcu pliku CSS # nakładka fancybox {display: none! Important} –

ten nie wydaje się być rozwiązane dla wszystkich. Co wydaje się dzieje się z fancybox na urządzenia mobilne jest div nie są ustawione poprawnie. To może być ustalona poprzez dodanie wykrywania tabletu:

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

Następnie można przejść wokół pojemników, jeśli wykryje tabletki:

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

To wydawało się rozwiązać ten problem dla mnie. Mam nadzieję, że to pomoże komuś innemu!

Źródło

2015-05-14 04:49:54

naprawiłem ten problem w bardzo prosty sposób poprzez zmianę

.fancybox-inner { 
    overflow: hidden; 
}

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

zoom: 1 trik css że zmusza element na zawsze pozostanie w centrum uwagi i na górze.

Źródło

2016-01-20 20:05:50

Fancybox problem nakładki na iPad/iPhone

Odpowiedz

Powiązane problemy