奇怪的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过渡...错误？

回答

相关问题