В этой статье хотелось бы написать о так называемой размытости текста, которая проявляет себя в браузерах, основанных на движке WebKit. Тестируя сайты в разных интернет-обозревателях, например, в Google Chrome или Opera, иногда можно с удивлением обнаружить этот неприятный эффект.

Эта проблема стала проявляться относительно недавно. Дело в том, что каждый браузер по-своему отрисовывает шрифты. Конечный вид так же во многом зависит и от других факторов включая экраны устройства, на котором осуществляется просмотр. Плюс ко всему разработчики постоянно совершенствуют свои продукты, добавляя в них что-то новое. Но иногда случается так, что с это "новое" больше вредит нежели улучшает продукт.

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

Пожалуй, первое, что вы можете найти по текущей проблеме - это включение DirectWrite в разделе эксперементальных функций Google Chrome. Попасть в раздел экспериментальных функций можно набрав в адресной строке chrome://flags. Однако эти действия должен проделать сам пользователь, поэтому включение DirectWrite нельзя назвать решением проблемы. Кроме того, такой способ уже не актуален т.к. в современных версиях хрома такая опция вообще отсутствует.

Следующее решение, которое предлагают, заключается в настройке сглаживания шрифта для WebKit. Предлагается выставить CSS-свойство -webkit-font-smoothing либо в antialiased, либо в subpixel-antialiased. Ни в первом, ни во втором случае я не увидел никаких изменений. Шрифт по-прежнему оставался размытым.

Далее идет фикс шрифта с помощью трансформаций. Предлагается выставить свойство transform в translateZ(0) или в translate3d(0,0,0). Вот это решение уже действительно делает шрифт нормальным, но может кое-что поломать на вашей странице. Я устанавливал такую трансформацию для всех элементов страницы (по селектору *). В итоге позиционирование некоторых модальных окон была нарушена. Всплывающее окно могло легко улететь за пределы видимости области просмотра. Чтобы нормально использовать это решение, нужно вручную перечислять все нужные элементы (p, li, h1, h2 и т.д.). Это, согласитесь, не очень удобно.

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

* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

Надеюсь это решение поможет и вам победить размытость. Если же вы знаете другие варианты, буду рад услышать их в комментариях.