Chrome не перерисовывает <div> после его скрытия

Question

У меня есть немного divы, которые появляются при наведении, а затем скрыты. Тем не менее, в Chrome (19.0.1084.56 м, Windows XP) при наведении курсора Chrome не перерисовывает их как пропавшие, пока вы не сделаете что-то вроде прокрутки или изменения размера окна.

http://jsfiddle.net/y7NdR/3/

Я знаю, что некоторые модификации моего CSS решат проблему, например, удалив position или же z-index а также overflow свойства, но я действительно не хочу этого делать - JSfiddle соединен с полным сайтом, где они мне нужны.

Может кто-нибудь пролить свет на то, почему именно эта проблема перерисовки происходит в Chrome? У кого-нибудь есть какие-либо советы, чтобы исправить это, не шутя с нужным мне CSS?

Answer 1

Понятно, что это ошибка WebKit.

Я обнаружил, что добавление -webkit-transform: scale3d(1,1,1); исправляет это:

http://jsfiddle.net/thirtydot/y7NdR/5/

Я не уверен, есть ли какие-либо недостатки этого исправления. Я думаю, это работает, потому что внутри WebKit для рендеринга 3D-преобразований используется другой код.

Answer 2

Я боролся с этим в течение очень долгого времени, и при добавлении -webkit-transform: scale3d(1,1,1); действительно решил мою проблему, я хотел выяснить, ПОЧЕМУ. Итак, я углубился в свой код, чтобы попытаться сузить мою проблему. Я обнаружил, что использовал анимацию с постепенным исчезновением, и внутри нее я включил в тот же класс:

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

Удалить эти две строки в одиночку, исправил мою проблему без взлома преобразования масштаба.

Видя, что видимость задней поверхности связана с преобразованиями и не должна иметь никакого влияния на 2D-преобразования, я удалил ее, и это полностью устранило мои проблемы.

Было замечено много ошибок, связанных с видимостью задней части Chrome, поэтому я опубликовал это для всех будущих людей, которые пытаются найти исправление без особой работы.