google-code-export / fancybox

Automatically exported from code.google.com/p/fancybox
1 stars 0 forks source link

Fancybox Image Gallery flickers on next/back rollovers with Google Maps loaded on page in Safari #115

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
I find that when I open a fancy box image gallery (multiple images), the image 
flickers severely when rolling over the next to back areas of the image. I have 
a Google maps using the JS API v3 loaded on the page (not IN fancybox). When I 
don't call the Google Map, fancybox acts normally. Note that this problem does 
not occur in Chrome, but it does in Safari (5.1.1)

I'm using FancyBox 1.3.4 and jQuery 1.7.

Original issue reported on code.google.com by car...@altcareer.com on 17 Nov 2011 at 8:12

GoogleCodeExporter commented 9 years ago
got the same problem with Fancybox 2 but in any option. That is when ever a box 
starts popping up the background flickers. The flickering is heaviest when 
loading a gallery with thumbnails

Original comment by tomvu...@student.liu.se on 17 Jan 2012 at 8:31

GoogleCodeExporter commented 9 years ago
Hello folks, I fixed this issue last night in Safari once and for all. You need 
to change your fancybox CSS. The relevant modded CSS is below (generally 
between lines 158 and lines 195):

#fancybox-left-ico, #fancybox-right-ico {
    position: absolute;
    top: 50%;
    /*left: -9999px;/* safari fix w/ google maps */
    left: 20px; /* safari fix w/ google maps */
    visibility: hidden; /* safari fix w/ google maps */
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    z-index: 1102;
    display: block;
}

#fancybox-left-ico {
    background-image: url('fancybox.png');
    background-position: -40px -30px;
}

#fancybox-right-ico {
    background-image: url('fancybox.png');
    background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
    visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
    left: 20px;
    visibility: visible; /* safari fix w/ google maps */
}

#fancybox-right:hover span {
    left: auto;
    right: 20px;
    visibility: visible; /* safari fix w/ google maps */
}

Original comment by akmjenk...@gmail.com on 1 Feb 2012 at 1:08