ブートストラップグリッドに背景画像を含む擬似要素のトランジションを使用する場合のグリッチ幅

Question

私が見ているものを説明するのは難しいです。表示するためのフィデルが含まれています。 divのいくつかにカーソルを合わせると、グリッド内の他のdivの端に「グリッチ」があります。ほとんどの場合、幅が1秒間変化しているように見えます。繰り返しますが、説明するのは難しいです。 2列または3列レイアウトのフィドルを見てください。

https://jsfiddle.net/riegersn/q2g9gxk3/3/

.project::before { 
    content: ''; 
    position: absolute; 
    left: -100%; 
    top: 0; 
    width: 200%; 
    height: 100%; 
    background-position: left center; 
    background-repeat: repeat-x; 
    background-size: contain; 
    background-image: inherit; 
    transition: transform 0.2s ease-out; 
} 

.project:hover::before { 
    transform: translateX(50%); 
} 

Answer 1

楽しい一つだまあ。

.project::before { 
    transform-style: preserve-3d; 
}