Сглаживание текста Wonky при вращении с помощью webkit-transform в Chrome - PullRequest
Новая
       30

Сглаживание текста Wonky при вращении с помощью webkit-transform в Chrome

30 голосов
/ 27 июля 2011

Я вращаю элемент, используя -webkit-transform: rotate(), а в Chrome 14.0.835.2 dev-m он делает действительно странные вещи с текстом внутри элемента.Это напоминает мне аналогичный эффект, который вы получаете в Photoshop, когда вы поворачиваете текст, используя «плавное» сглаживание вместо «четкого».

Кто-нибудь знает, что здесь происходит?Это специфично для этой версии WebKit или Chrome, или я могу что-то сделать, чтобы это исправить?(Это также не сглаживание границ между элементами списка)

Wonky text

Вот CSS: 

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

Ответы [ 2 ]

72 голосов
/ 21 сентября 2011

Попробуйте запустить режим 3D-трансформации CSS с помощью webkit.это изменяет способ рендеринга Chrome 

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

edit

Также есть объявление стиля Webkit -webkit-font-smoothing, которое принимает значения

  • none
  • subpixel-antialiased
  • antialiased

, где subpixel-antialiased - значение по умолчанию.

Увы, субпиксельная сглаженность не является хорошим решением для повернутого текста.Рендеринг не может справиться с этим.3D-преобразование переключается на antialiased.Но мы можем попытаться установить его напрямую.

Смотрите здесь http://maxvoltar.com/archive/-webkit-font-smoothing

16 голосов
/ 10 декабря 2012

Размытые шрифты вызваны странной проблемой webkit, включающей -webkit-backface-visibility. Это заняло у меня целую вечность, и я еще нигде не видел этого в Интернете.

Теперь я добавляю -webkit-backface-visibility: hidden; в тело моего сайта в качестве стиля сброса CSS. Смотреть это точить шрифты на вашем сайте, это удивительно. Ваши преобразования не являются трехмерными, так что в любом случае это ни на что не повлияет, но если вы решите делать 3d-преобразования где-то еще на вашем сайте, просто добавьте back -webkit-backface-visibility: visible; к конкретному элементу. Также следует исправить мерцание тоже.

...