Как исправить хрустящий текст в Safari 5 Mac OS X после использования CSS-преобразований 3D?

Question

Я столкнулся с проблемой, когда странное поведение срабатывает на относительных и абсолютных позиционированных элементах после того, как элемент с применением 3d-преобразований CSS.

Чтобы исправить это, я должен установить цвет фона, но что, если мне нужнопрозрачность?

Вот минимум для воспроизведения ошибки: http://jsfiddle.net/8VABq/3/

Answer 1

Это действительно странная ошибка.

Моя первая попытка связана с указанием прозрачного фона:

.crispy {
  position: relative;
  font-size:.9em;
  background: rgba(255,255,255,0);
}

Однако это не работает.На самом деле, если вы играете со значением альфа (ноль), оно может варьироваться от хрустящего (0) до нормального (1).

Обтекание внутреннего div и указание статической позиции также не работает.

Единственное решение, которое я нашел, было следующее:

.crispy {
  position: relative;
  font-size:.9em;
  -webkit-font-smoothing: antialiased;
}

Это, однако, делает весь ваш текст немного более размытым, поскольку он не использует субпиксельное сглаживание, доступное на ЖК-мониторах.Это может (или не может) быть приемлемым обходным путем.

Answer 2

Я все еще испытываю эту ошибку в Safari 5.1. То, что сработало для меня, это установить сглаживание шрифтов самостоятельно. Субпиксельное сглаживание должно быть по умолчанию, но, очевидно, это не так. Если я добавлю следующее к элементу с поврежденной визуализацией шрифта, все снова будет выглядеть хорошо:

-webkit-font-smoothing: subpixel-antialiased;

Answer 3

Вам нужно взломать, чтобы выяснить, что переключается на тиддл, чтобы сафари отключало режим без псевдонимов в преобразованиях. В этом случае, если вы избавитесь от перспективы webkit или установите для нее значение 0px, текст будет отображаться не хрустящим. Вам понадобится перспектива webkit только в том случае, если вы выполняете трехмерные преобразования И действительно используете 3-е измерение И нуждаетесь в этом.