CODEWITHSUNDEEP
google-chromefadeinfadeout
Will Viles
Will Viles

Reputation: 281

FadeIn/FadeOut strange glitch in Chrome - only on Macs!

I'm finding a very strange problem with my jQuery mouseover caption function when viewed in Chrome - but only on Macs! My friend uses Windows 7 and all of his browsers display the js correctly and smoothly. However I've tested on numerous Macs and Chrome for Mac just can't seem to handle it!

FF and Safari work perfectly in both OS (slightly smoother in Safari).

Firstly, here's the site I'm building at the moment here. The function is the mouseover for each item in the portfolio section.

The JS:

$(document).ready(function() {
$('.item .caption').hide();
//On mouse over
$('.item').hover(function() {
    //Display the caption
    $(this).find('div.caption').stop(true, true).fadeIn(300);
},
//When mouse leave
function() {
    //Hide the caption
    $(this).find('div.caption').stop(true, true).delay(700).fadeOut(300);
});});

The CSS:

.item {
    float:left;
    height: 215px;
    margin: 7px;
    width: 225px;
    position: relative;
    background: #cacbce;    
}

.item .caption {
    background: url(images/hoverbg.png) repeat;
    box-shadow:inset 0px 0px 250px #000;
    -moz-box-shadow:inset 0px 0px 250px #000;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    position: absolute;
    top: 0;
}

Pretty standard function, I'm sure you'll agree. Has anyone got any ideas what is going wrong?

I'm using Chrome 10.0.648.133 (up to date as of 15th March 2011). I'm starting to think it's a problem with the browser!

Upvotes: 1

Views: 548

Answers (1)

Will Viles
Will Viles

Reputation: 281

This has been resolved.

Chrome has difficulty with box-shadow css inside elements you're applying the JS to. Once I removed that, it worked perfectly. I'll bring this issue up on the Chrome dev forums.

Upvotes: 1

Related Questions