Question

如果您访问最新稳定版Chrome中的http://www.framingham.edu/，您会注意到“Spring Commencement”链接的CSS3转换不起作用。它也不适用于“更多事件”文本（但它确实适用于它背后的蓝色背景）。如果您在Safari，Firefox或Opera中尝试相同的操作，它可以正常工作。我真的不明白为什么会这样。可能是我的CSS3导致它专门针对Chrome破解了吗？

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 ...

Answer 1

转换适用于我，但是所有动画都设置为包装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

奇怪的CSS3过渡......错误？

1 个答案: