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

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

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

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

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

Ответ 1

Очевидно, что это ошибка WebKit.

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

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

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

Ответ 2

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

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

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

Увидев, что обратная видимость связана с преобразованиями и не должна влиять на 2D-преобразования, я удалил ее и полностью исправил свои проблемы.

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