奇怪的CSS3過渡...錯誤？

如果您在Chrome的最新穩定版中訪問http://www.framingham.edu/，您會注意到「Spring Commencement」鏈接的CSS3過渡不起作用。它也不適用於「更多事件」文本（但它適用於背後的藍色背景）。如果您在Safari，Firefox或Opera中嘗試相同的功能，則可以正常工作。我不明白爲什麼會發生這種情況。它可能是我的CSS3導致它專門爲Chrome打破？奇怪的CSS3過渡...錯誤？

CSS：

#events span a { 
    color: #B00932; 
    text-decoration: none; 
    -webkit-transition: color 0.6s ease-in; 
    -moz-transition: color 0.6s ease-in; 
    -o-transition: color 0.6s ease-in; 
    -ms-transition: color 0.6s ease-in; 
    transition: color 0.6s ease-in; 
} 
#events span a:hover { 
    color: #ecb220; 
    text-decoration: none; 
} 
.moreEvents { 
    text-align: center; 
    font-weight: bold; 
    padding: 10px 0; 
    background-color: #00345c; 
    -webkit-transition: background-color 0.6s ease-in, color 0.6s ease-in; 
    -moz-transition: background-color 0.6s ease-in, color 0.6s ease-in; 
    -o-transition: background-color 0.6s ease-in, color 0.6s ease-in; 
    -ms-transition: background-color 0.6s ease-in, color 0.6s ease-in; 
    transition: background-color 0.6s ease-in, color 0.6s ease-in; 
} 
.moreEvents:hover { 
    background-color: #eeb220; 
} 
.moreEvents a { 
    color: #fff; 
    -webkit-transition: color 0.6s ease-in; 
    -moz-transition: color 0.6s ease-in; 
    -o-transition: color 0.6s ease-in; 
    -ms-transition: color 0.6s ease-in; 
    transition: color 0.6s ease-in; 
} 
.moreEvents a:hover { 
    color: #000; 
}

編輯： 由於zim2411說，在這兩個Chrome和Firefox爲他工作，我決定今天再次嘗試它和它的工作！我能想到的，我昨天和今天之間做的唯一一件事就是清楚了我所有瀏覽器的緩存等等。我猜這與訪問過的鏈接有關，因爲當我點擊「Spring Commencement」鏈接並返回到該頁面時，轉換不再起作用。其他人能否在訪問鏈接後確認轉換無效？它仍然只發生在Chrome ...

來源

2012-03-20 Aaron

我沒有最新的穩定版本的Chrome，但放心，它在夜間工作:) – Ryan 2012-03-21 15:55:25

Chrome 7.0.963.79米在Windows 7和Firefox 11.0有我的匹配效果。 – zim2411 2012-03-21 16:02:38

我做了一個編輯。我懷疑它與Chrome瀏覽器的訪問鏈接有關... – Aaron 2012-03-21 16:46:43

轉換爲我工作，但所有您的動畫設置爲包裝moreEvents股利。因爲你是懸停在div上，而不是在那裏包裹的標籤，你不會看到文字顏色動畫，直到你移動到中間更多。

我的建議是從多個事件中移除填充，並把它放在一個標籤，同時增加顯示塊即

.moreEvents { 
padding:0px; 
} 
.moreEvents a { 
padding:10px 0; 
display: block; 
}

編輯：經進一步調查這實際上似乎是一個已知的錯誤，這應該在v18中修復。 http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

來源

2012-03-21 16:02:36

感謝您的建議，但看看我最近的編輯。有一些奇怪的行爲。 – Aaron 2012-03-21 16:47:41

現在我已經看到它在行動，這似乎是一個已知的錯誤，我已編輯我的答案來表明。 – 2012-03-22 15:34:56

好找！我以前從未見過。 – Aaron 2012-03-22 15:48:52

奇怪的CSS3過渡...錯誤？

回答

相關問題