Наведение курсора на переход CSS в Safari делает определенный цвет шрифта светлее

Я боролся с аналогичной проблемой. Для меня случайные ссылки на странице стали явно жирными (очевидно, что это связано с OSX и сглаживанием в Safari, поскольку Chrome (в Windows 7 и OSX), а также та же версия Safari в Windows работали нормально.

Решение неочевидно, и в зависимости от того, что вы делаете, может быть не оптимальным, но добавление этой строки кода устранило проблему:

-webkit-transform: translateZ(0);

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

Вы добавляете это к обычному состоянию, не анимированному состоянию :hover.

img { -webkit-transform: translateZ(0); }

В отличие от на:

img:hover { /* not here */ }

Другой очень положительный побочный эффект заключается в том, что в зависимости от анимации, которую вы делаете, она может быть более плавной через графический процессор. Таким образом, вы не получите прерывистую анимацию, о которой упоминаете в своем последующем посте. В моем случае анимация была более плавной в сафари. Я выполнял масштабирование 120% и поворот изображения на 5 градусов, при этом одновременно появлялась тень коробки. В моей ситуации это, к сожалению, не уменьшило загрузку процессора.

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

В двух словах: у меня есть какой-то контейнер (всплывающее окно), какой-то элемент внутри. Появление происходит следующим образом: фон контейнера затемняется за счет непрозрачности, а элемент внутри увеличивается (как бы приближается к нам сзади). Все отлично работает везде, но не в Safari (Mac/Win/iPhone). Safari «сначала» показывает мой контейнер, но он как-то странно мигает (появляется крошечная короткая вспышка).

Только добавление -webkit-transform: translateZ(0); (в контейнер!!!) помогло.

.container {
    -webkit-transform: translateZ(0); /* <-- this */
}

.container section {
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
    -webkit-transition: -webkit-transform .4s, opacity .3s;
    opacity:0;
}

.container.active section {
    -webkit-transform:translateZ(0) scale(1);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    opacity:1;
}

Но если говорить о переходах, то была еще и следующая часть кода:

.container {
    ...
    top:-5000px;
    left:-5000px;
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
    -webkit-transition: opacity .5s;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

учитывая, что я хочу показать/скрыть всплывающее окно, используя только переключение css (а также сделать так, чтобы оно красиво исчезло, а не просто «отображать: нет»).

Итак, каким-то образом при появлении Safari (очевидно) наследовал свойства перехода, помимо «непрозрачности», даже несмотря на то, что я перегрузил их только -webkit-transition: opacity .5s;

поэтому добавление следующего решило проблему:

.container {
    ...
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}

Я не могу объяснить вам, почему он это делает, но Safari не меняет цвет вашего текста, он по-разному сглаживает текст во время перехода. Края текста становятся более гладкими, а сам текст становится тоньше. Это особенно очевидно, если вы увеличите масштаб скрипки с помощью специальных возможностей. При некоторых меньших размерах также меняется затенение вокруг кнопки рядом с текстом формы. (Возможно ли, что Safari перерисовывает некоторые вещи или переориентирует их на субпиксельном уровне во время переходов? Кто-нибудь объясните это, пожалуйста, это сводит меня с ума!)

Поскольку я понятия не имею, почему он это делает, это может быть не лучшим решением:

В зависимости от того, что вы преобразовываете, замена преобразования css на анимацию javascript, вероятно, решит проблему.
Например, в вашей скрипте проблема также возникла с преобразованием масштаба, но не с аналогичной функцией анимации jQuery.

Кажется, есть некоторые оттенки и стили, в которых изменение сглаживания менее очевидно (по крайней мере, в скрипке), поэтому вы также можете попробовать по-другому стилизовать заполнители и другой обработанный текст.
(Эта ветка может помочь со стилем заполнители, если вы пойдете по этому пути: измените цвет заполнителя ввода HTML5 с помощью CSS )

Благодаря идентификации сглаживания выше, а также помощи из статей ниже, я изменил свой код, включив в него translate3d(0,0,0), и проблема исчезла:

    -webkit-transition-duration: .17s, .17s translate3d(0,0,0);

Переход не такой плавный, как раньше, но это тема для другого вопроса.

Нечеткое сглаживание текста при вращении с помощью webkit- трансформировать в Chrome

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/< /а>

у меня была такая же проблема, при переходе какой-то текст стал сглаженным. это происходит только в якорном тексте, который расположен относительно e с z-index внутри позиционированного элемента и с самим z-index. если я удалю все позиции и проиндексирую, проблема исчезнет.

Аналогичная проблема возникает при использовании transition и translate3d. Иногда любой элемент на странице с :hover стилями показывает свое поведение при наведении. У меня есть эта проблема с использованием ползунка. Поместите -webkit-transform: translateZ(0); в элемент :hover, и его поведение будет нормальным.

Для rotation(), возможно, это нормально, но для scale() формула -webkit-transform: translateZ(0); не работает.

Я использовал :

-webkit-font-smoothing: antialiased;