Chrome 中的淡入/淡出奇怪故障 - 仅在 Mac 上!
在 Chrome 中查看时,我发现 jQuery 鼠标悬停标题功能存在一个非常奇怪的问题 - 但仅限于 Mac!我的朋友使用Windows 7,他的所有浏览器都可以正确流畅地显示js。然而我在很多 Mac 上进行了测试,Mac 版 Chrome 似乎无法处理它!
FF 和 Safari 在这两个操作系统中都能完美运行(Safari 中稍微流畅一些)。
首先,这是我目前正在此处构建的网站。该功能是将鼠标悬停在投资组合部分中的每个项目上。
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);
});});
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;
}
非常标准的功能,我相信您会同意。有谁知道出了什么问题吗?
我使用的是 Chrome 10.0.648.133(截至 2011 年 3 月 15 日最新)。我开始认为这是浏览器的问题!
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!
这个问题已经解决了。
Chrome 在您应用 JS 的元素内处理 box-shadow css 时遇到困难。一旦我删除它,它就完美地工作了。我会在 Chrome 开发者论坛上提出这个问题。
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.