Преобразование CSS3, влияющее на другие элементы с хромом/сафари

У меня проблема, когда мои css3-преобразования производят другие элементы на странице и даже вызывают их мерцание. Я видел еще одно сообщение об этом, но у них не было разрешения с этим вопросом.

http://scosha.mybigcommerce.com/w107b/, когда вы просматриваете навигацию, вы видите анимированную трансформацию css3. Он отлично работает в firefox без мерцания, но с хромом и сафари эффект очень очевиден, вы видите его в выпадающих меню, а также в нижнем колонтитуле.

Ответы

Ответ 1

Это известная проблема с рендерингом текста Macintosh на Chrome 22 (и, по-видимому, Safari). Ускорение GPU заставляет MacOS переключаться с субпикселя на антиалиасинг оттенков серого, что значительно уменьшает вес шрифта.

Update:

В качестве заметок OP ниже, исправление заключается в применении -webkit-font-smoothing: antialiased - который применяет антиалиасинг в оттенках серого в любое время. Если вы это сделаете, вы, вероятно, захотите увеличить размер шрифта вокруг, поскольку текст с сглаживанием в оттенках серого выглядит заметно тоньше субпикселя

Вы можете получить тот же эффект, применяя свойства, которые заставляют контент всегда ускорять GPU (например, видимость на лицевой панели: скрыто), но поскольку они не гарантируют, что ускорение GPU в будущих версиях браузера - это больше в будущем, чтобы просто указать оттенки серого.

Ответ 2

Рабочее решение для мерцающих элементов во время перехода в Chrome - это настройка CSS для родительского node:

-webkit-backface-visibility: hidden;

Ответ 3

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

-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);

Ответ 4

У меня была такая же проблема в Chrome, но не в Firefox.

Временное исправление заключается в добавлении исправления web-kit и удалении перехода:

-webkit-transition: none;