Ошибка пикселя с переполнением: 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

Ответ 1

Я столкнулся с этой ошибкой раньше. ошибка пикселя вызвана преобразованием: translate.

попробуйте это на родительском элементе.

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

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

transform-style: preserve-3d;

Ответ 2

Я попробую использовать один из следующих вариантов:

позиция: относительная;

-webkit-transform: translateZ (0px);

-webkit-font-smoothing: subpixel-antialiased; или webkit-font-smoothing: сглаживание