Fancybox overlay issue on ipad/iphone

Question

On ipad / iphone, the overlay appears over the top of media in fancybox, that is the whole page is filled with the overlay incuding the content of fancybox. Any ideas how I can fix this?

Also, I have jwplayer working in fancybox playing videos using html5, instead of Flash, but the problem is the overlay appearing on top of the video, so that when I touch the play button, fancybox goes away...

See my previous question on my implementation of jwplayer in fancybox for ios at jwplayer in fancybox not playing on ipad/iphone

EDIT:

Interestingly, if I comment out this block of css, I can click on the fancybox video on an ipad without it going away and play the video:

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

Whilst fancybox then works OK on iPhone and iPad, the display of fancybox of desktop devices is less than desirable...

Does this also happen in browsers on a PC (Internet Explorer, Firefox, Chrome)? — Uooo, Feb 14 '13 at 06:23
See https://groups.google.com/forum/?fromgroups=#!topic/fancybox/oUnAPbTisfY for examples of what I'm seeing — IlludiumPu36, Feb 14 '13 at 07:45

score 11 · Answer 1 · edited Jan 03 '14 at 16:58

11

It may me due to z-index issue. Try adding these lines at last of the CSS file :

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

edited Jan 03 '14 at 16:58

mgraph

15,238
4
41
75

answered Feb 14 '13 at 06:19

Mandeep Pasbola

2,631
2
26
50

Did that but no difference. How could I remove the overlay altogether in the css? – IlludiumPu36 Feb 14 '13 at 07:03
I have commented out background: url('fancybox_overlay.png'); which has removed the overlay...but touching the play button for a video in fancybox still cloeses fancybox...using closeClick: false, doesn't make any differennce on the ipad. – IlludiumPu36 Feb 14 '13 at 07:08
Add this at last of the CSS file #fancybox-overlay{display:none!important} – Mandeep Pasbola Feb 14 '13 at 08:53
Forcing a z-index with a arbitrary high stacking index like `.fancybox-wrap{z-index:99999 !important}` is not really a good practice. I highly recommend reading this article: https://css-tricks.com/rational-z-index-values/ which discussed this bad development strategy in detail. In practice, you should always figure out the rational limit which is needed so you can proceed with incrementing within the normative boundaries of the regular DOM stacking scheme. – DrewT Feb 25 '16 at 18:34

score 7 · Accepted Answer · answered Feb 14 '13 at 08:47

7

If I change the css in jquery.fancybox.css to the following, all is fine on desktop and ios devices:

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

answered Feb 14 '13 at 08:47

IlludiumPu36

4,196
10
61
100

1

Note to self and future users: Notice the change in position type as well as the commenting out of the z-index. – mindtonic Sep 24 '13 at 21:18

score 1 · Answer 3 · answered May 14 '15 at 04:49

This doesn't seem to be solved for everyone.. What appears to be happening with fancybox on mobile is the divs are not arranged correctly. This can be fixed by adding some tablet detection:

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

Then you can move the containers around if you detect a tablet:

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

This seemed to fix the issue for me. Hope this helps someone else out there!

score 1 · Answer 4 · answered Jan 20 '16 at 20:05

1

I fixed this issue very simply by changing

.fancybox-inner {
    overflow: hidden;
}

with

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

the zoom : 1 is a css trick that forces the element to always stay in focus and on top.

answered Jan 20 '16 at 20:05

Hugo St-Arnaud

159
5

Fancybox overlay issue on ipad/iphone

4 Answers4