Имам проблем, при който моите css3 трансформации влияят на други елементи на страницата и дори ги карат да трептят. Видях друга публикация за това, но те нямаха решение на проблема.
http://scosha.mybigcommerce.com/w107b/, когато превъртите над навигацията, виждате анимиран css3 трансформация. Работи добре във firefox без трептене, но с chrome и safari ефектът е много очевиден, виждате го в елементите на падащото меню, както и в текста на долния колонтитул.
Това е известен проблем с изобразяването на текст от Macintosh в Chrome 22 (и очевидно Safari). Ускоряването на графичния процесор кара MacOS да превключва от субпиксел към антиалиасинг в скала на сивото, което кара теглото на шрифта да изглежда забележимо намалено.
Актуализация:
Както OP отбелязва по-долу, корекцията е да се приложи -webkit-font-smoothing: antialiased - който прилага антиалиасинг в сивата скала по всяко време. Ако направите това, вероятно ще искате да увеличите теглото на шрифта навсякъде, тъй като антиалиазираният текст в скала на сивото изглежда значително по-тънък от субпиксела
Можете да получите същия ефект, като приложите свойства, които карат съдържанието винаги да бъде GPU ускорено (като back-face-visibility: hidden), но тъй като не е гарантирано, че те ще причинят GPU ускорение в бъдещите версии на браузъра - това е по-устойчиво за бъдещето просто посочете сивата скала.
-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;
