У меня проблема, когда мои css3-преобразования производят другие элементы на странице и даже вызывают их мерцание. Я видел еще одно сообщение об этом, но у них не было разрешения с этим вопросом.
http://scosha.mybigcommerce.com/w107b/, когда вы просматриваете навигацию, вы видите анимированную трансформацию css3. Он отлично работает в firefox без мерцания, но с хромом и сафари эффект очень очевиден, вы видите его в выпадающих меню, а также в нижнем колонтитуле.
Это известная проблема с рендерингом текста Macintosh на Chrome 22 (и, по-видимому, Safari). Ускорение GPU заставляет MacOS переключаться с субпикселя на антиалиасинг оттенков серого, что значительно уменьшает вес шрифта.
Update:
В качестве заметок OP ниже, исправление заключается в применении -webkit-font-smoothing: antialiased - который применяет антиалиасинг в оттенках серого в любое время. Если вы это сделаете, вы, вероятно, захотите увеличить размер шрифта вокруг, поскольку текст с сглаживанием в оттенках серого выглядит заметно тоньше субпикселя
Вы можете получить тот же эффект, применяя свойства, которые заставляют контент всегда ускорять GPU (например, видимость на лицевой панели: скрыто), но поскольку они не гарантируют, что ускорение GPU в будущих версиях браузера - это больше в будущем, чтобы просто указать оттенки серого.
Рабочее решение для мерцающих элементов во время перехода в Chrome - это настройка CSS для родительского node:
-webkit-backface-visibility: hidden;
Решение для меня заключалось в том, чтобы применить cellow css к родительскому элементу всех затронутых элементов.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
У меня была такая же проблема в Chrome, но не в Firefox.
Временное исправление заключается в добавлении исправления web-kit и удалении перехода:
-webkit-transition: none;