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...

Maker

Does this also happen in browsers on a PC (Internet Explorer, Firefox, Chrome)? – Witchcraft

See groups.google.com/forum/?fromgroups=#!topic/fancybox/… for examples of what I'm seeing – Maker

Answer 1

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');
}

Maker

Note to self and future users: Notice the change in position type as well as the commenting out of the z-index. – Fibrovascular

Answer 2

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}

Monjan

Did that but no difference. How could I remove the overlay altogether in the css? – Maker

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. – Maker

Add this at last of the CSS file #fancybox-overlay{display:none!important} – Monjan

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: 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. – Divergent

Answer 3

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!

Inerney

Answer 4

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.

Hemorrhage