Проблемы с непрозрачностью Webkit с текстом

Ситуация:

Просмотр jsFiddle

Внутри div у меня есть изображение, за которым следует текст с font-weight 900 на нем. В моей локально размещенной среде я использую пользовательский шрифт, но для скрипки выше я выбрал "ever-so-stylish" Comic Sans, чтобы проиллюстрировать мою мысль. Прежде чем что-либо произойдет, я установил непрозрачность всего div равным 0,7. Однако при наведении курсора на div я хочу, чтобы непрозрачность всего объекта достигла полной непрозрачности.

Проблема:

Я заметил, что только в браузерах Webkit (что более очевидно в Chrome, чем в Safari), при зависании и отключении тега div текст изменится. На самом деле, нет никакого изменения, конечно, в весе текста. Тем не менее, при ближайшем рассмотрении вы увидите, что текст появляется при желаемом весе только при наведении курсора, но не в не зависающем состоянии.

Что я сделал:

  • Я тестировал это во всех последних версиях Chrome, Firefox и Safari.
  • Я тестирую это в настоящее время на новом MacBook Pro, который в моем случае является сетчатым экраном. Тем не менее, коллега рядом со мной проверил скрипку на ее iMac (не-сетчатый дисплей) только для того, чтобы найти проблему, которая все еще очевидна.
  • Возможно, я просто сумасшедший, но я чувствую, что на самом деле это может быть так, как браузеры webkit предпочитают отображать элементы с разными непрозрачностью. Опять же, это может быть только я, пытаясь не признать, что я сделал что-то не так.

И, естественно, я думал, что смогу облегчить настроение Comic Sans. Вот скриншот, который поможет объяснить проблему:

Embrace the Comic Sans!

Ответы

Ответ 1

Это не проблема с непрозрачностью (на самом деле, вернувшись к 1 в примере @Zoltan, это ничего не меняет).

Проблема заключается в переходах, существует два режима сглаживания, которые может использовать webkit:

  • Subpixel (по умолчанию, но не поддерживается во время анимаций, переходов или преобразований) или
  • Grayscale

Это означает, что когда элемент визуализируется с использованием подпиксельного сглаживания и к нему применяется анимация, webkit временно переключается в оттенки серого на время анимации, а затем возвращается к субпикселю после завершения.

Учитывая, что субиксельное сглаживание приводит к чуть более тяжелой грани шрифта, вы получаете нежелательный артефакт.

Чтобы решить проблему, добавьте ее в свой css:

html {
    -webkit-font-smoothing: antialiased;
}

Это приводит к сглаживанию оттенков серого и всему тексту, и вы не увидите переключения.

(конечный результат: http://jsfiddle.net/ErVYs/9/)

Ответ 2

Возможным решением было бы сделать переход непрозрачности не на 1, а .999 - http://jsfiddle.net/ErVYs/2/

div {
    width: 200px;
    text-align: center;
    opacity: 0.7;
    transition: opacity ease-in 0.25s;
    -webkit-transition: opacity ease-in 0.25s;
    -moz-transition: opacity ease-in 0.25s;
    -o-transition: opacity ease-in 0.25s;
}

div:hover {
    opacity: .999;
}