Ошибка пикселя с переполнением: hidden и transform: translate

У меня есть коробка с надписью, которая position: absolute и скрыта с top: 100%. У родителя надписи overflow: hidden. Когда я наводил курсор, заголовок загорается, поэтому он полностью виден.

Теперь проблема заключается в том, что во время этого перехода возникает ошибка пикселей. Это означает, что заголовок во время перехода на 1 пиксель меньше ширины, чем родительский. После перехода все выглядит хорошо.

Он отображается в IE 11 в Windows 8.1 и в браузерах Webkit на Mac 10.11.2.

Вы должны увидеть этот эффект в этой скрипке. Когда вы не видите ошибку пикселя, попробуйте изменить размер окна.

Вы также видите ошибку на снимке экрана.

Я уже пытался:

• Установите подпись размером более 1 пикселя
• Добавить overflow-x: hidden
• Добавить translate3d

Ответы

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

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

transform-style: preserve-3d;