FadeIn/FadeOut在Chrome中出現奇怪的故障 - 僅在Mac上！

在Chrome瀏覽器中查看我的jQuery鼠標懸停字幕功能時發現了一個非常奇怪的問題 - 但只能在Mac上使用！我的朋友使用Windows 7，他所有的瀏覽器都能正確，順暢地顯示js。不過，我已經在衆多Mac電腦上測試過，而Mac版Chrome瀏覽器似乎無法處理它！FadeIn/FadeOut在Chrome中出現奇怪的故障 - 僅在Mac上！

FF和Safari在兩個操作系統中都很完美（在Safari中稍微平滑）。

首先，這裏是我正在建設的網站here。該功能是投資組合部分中每個項目的鼠標懸停。

的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日爲止）。我開始認爲這是瀏覽器的問題！

來源

2011-03-15 Will Viles

我有同樣的問題，但有趣的事情，與Mac一切正常，如果頁面打開外部顯示器。這真的很奇怪：D – Daggeto 2015-11-06 07:14:17

這已解決。

Chrome在你應用JS到的元素內部存在盒子陰影css的困難。一旦我刪除它，它完美運作。我會在Chrome開發論壇上提出這個問題。

來源

2011-03-15 11:42:14

FadeIn/FadeOut在Chrome中出現奇怪的故障 - 僅在Mac上！

回答

相關問題