Наведение на переход CSS в Safari облегчает определенный цвет шрифта

в моем CSS я определил переход для класса. По какой-то причине, когда я зависаю над классом с переходом,transition-duration по какой-то причине изменяет цвет шрифта в другом месте (заполнители формы и определенные ссылки). (Насколько я могу судить, это происходит только в Safari.)

вот jsFiddle, который показывает, о чем я говорю:

http://jsfiddle.net/EJUhd/

кто-нибудь знает, почему это происходит и как я могу предотвратить это?

20
css css-transitions css3

7 ответов

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

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

-webkit-transform: translateZ(0);

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

вы добавляете это в нормальное состояние не: наведите анимированное состояние. 

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

В отличие от:

img:hover { /* not here */ }

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

35

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

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

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

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

2

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

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

переход не так гладко, как когда-то, но это тема для другого вопроса.

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

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

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

2

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

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

только добавление-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 .5С;

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

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

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

0

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

0

на поворот() может быть, это и хорошо, но для масштаб() это не сработало -webkit-transform: translateZ(0); формула.

Я : 

-webkit-font-smoothing: antialiased;
0