开发者

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

开发者 https://www.devze.com 2023-02-17 09:28 出处:网络
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 sm

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 m开发者_运维技巧oment 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!


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号