オーバーフローによるピクセルエラー：トランスフォーム：翻訳

Question

私はposition: absoluteであり、top: 100%で隠されたキャプション付きのボックスを持っています。キャプションの親はoverflow: hiddenです。ボックスを移動すると、キャプションが完全に表示されるようにスライドします。

問題は、この移行中にピクセルバグがあることです。つまり、トランジション中のキャプションは、親ボックスの幅より1ピクセル小さいです。トランジション後はすべてがよさそうだ。

IE 8.1のWindows 8.1およびMac 10.11.2のWebkitブラウザに表示されます。

この効果はthis fiddleに表示されます。 ピクセルのバグが表示されない場合は、ウィンドウのサイズを変更してみてください。

また、スクリーンショットでエラーが表示されます。私はすでにしようとした

：

• をキャプション1ピクセルを設定して、より広い
• は、私はそれを試してみるよtranslate3d

Answer 1

を追加overflow-x: hidden

を追加します。次のいずれかのオプションを使用してください：

位置：相対;

-webkit-transform：translateZ（0px）;

-webkit-font-smoothing：サブピクセルアンチエイリアス。またはウェブキットフォントスムージング：アンチエイリアス

Answer 2

このエラーが発生しました。ピクセルバグはtransform：translateによって引き起こされます。

親要素でこれを試してください。

-webkit-transform-style: preserve-3d; 

-moz-transform-style: preserve-3d; 

transform-style: preserve-3d;