問題：
I have some CSS that on hover, a CSS transition effect will moves a div.我有一些 CSS 在懸停時，CSS 過渡效果會移動一個 div。
The problem, as you can see in the example, is that the translate transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly resize ever so slightly?) so that it appears out of place and out of focus...正如您在示例中所看到的，問題在於translate過渡具有可怕的副作用，使 div 中的圖像向下/向右移動 1px（並且可能稍微調整大小？），使其看起來不合適和失焦...
The glitch seems to apply the whole time the hover effect is applied, and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div (box shadow and opacity are also applied but make no difference to the error when removed).小故障似乎在應用懸停效果的整個過程中都適用，並且從反覆試驗的過程中，我可以有把握地說似乎只有在平移過渡移動 div 時纔會發生（也應用了框陰影和不透明度，但對刪除時的錯誤）。
The problem only seems to happen when the page has scrollbars.該問題似乎僅在頁面具有滾動條時發生。 So the example with just one instance of the div is fine, but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again...因此，只有一個 div 實例的示例很好，但是一旦添加了更多相同的 div，頁面因此需要滾動條，問題再次出現......
解決方案：
參考一： https://en.stackoom.com/question/12suF參考二： https://stackoom.com/question/12suF