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