html - 悬停在 chrome 上时更改位置时的翻译/行高问题

Question

这个问题只出现在 chrome 上。

http://jsfiddle.net/3ew5o6as/

基本上，当您将鼠标悬停在 .tile 上时，它应该会在下方显示 .caption。它运行良好，但它不会恢复到应有的原始状态。如果你仔细观察，它会在 mouseout 后显示大约 1-2 个像素。

我似乎注意到，每当我删除 .wrap 上的 translate:transform 或删除 line-height 时，问题就会消失:50px 在 .caption

有什么建议吗？

Answer 1

对于不同的缩放级别，有时转换和绝对定位的值并不完全匹配。要解决此问题，您只需在底部添加一个 1px“误差范围”:

.tile .caption {
    ...
    bottom: -51px;
    ....
}

参见 fiddle : http://jsfiddle.net/jeremyblalock/3ew5o6as/1/