В моем CSS я определил переход для класса. По какой-то причине, когда я нависаю над классом с переходом, transition-duration по какой-то причине изменяет цвет шрифта в другом месте (создайте заполнители и определенные ссылки). (Это происходит только в Safari, насколько я могу судить.)
Здесь jsFiddle, который показывает, о чем я говорю:
Кто-нибудь знает, почему это происходит и как я могу это предотвратить?
Я боролся с подобной проблемой. Для меня случайные ссылки на странице стали явно смелыми (что-то вроде OSX и сглаживания в Safari, так как Chrome (в Windows 7 и OSX), а также ту же версию Safari в Windows отлично работали.
Решение не очевидно, и в зависимости от того, что вы делаете, может оказаться не оптимальным, но добавив эту строку кода, исправлена проблема:
-webkit-transform: translateZ(0);
Это в основном заставляет GPU делать анимацию, а текст больше не содержит артефактов на моем сайте. Помните, что он не всегда подходит для использования, так как он может использовать больше времени автономной работы и использовать больше ресурсов. Иногда, однако, он использует меньше, поэтому в основном проверяйте производительность при ее добавлении.
Вы добавляете это в нормальное состояние, а не в анимированное состояние: hover.
img { -webkit-transform: translateZ(0); }
В отличие от:
img:hover { /* not here */ }
Другим очень положительным побочным эффектом является то, что в зависимости от анимации, которую вы делаете, он может быть более плавным через GPU. Таким образом, вы не получите изменчивую анимацию, которую вы упомянули в своем последующем сообщении. В моем случае анимация была более плавной в сафари. Я делал 120-процентную шкалу и 5-градусное вращение изображения с некоторой коробкой-тенью, появляющейся в одно и то же время. В моей ситуации это, к сожалению, не уменьшило использование ЦП.
Я не могу сказать вам, почему это делается, но Safari не меняет цвет текста, он сглаживает текст по-разному, пока переход находится в движении. Границы текста становятся более гладкими, и сам текст становится тоньше. Это особенно очевидно, если вы увеличите масштаб на скрипке с помощью инструментов доступности. При меньших размерах также меняется затенение вокруг кнопки рядом с текстом формы. (Возможно ли, что Safari перерисовывает некоторые вещи или переориентирует их на субпиксельном уровне во время переходов? Кто-нибудь объясняет это, пожалуйста, это заставляет меня гать!)
Потому что у меня нет реальной идеи, почему это так и делается, это могут быть не лучшие решения:
В зависимости от того, что вы трансформируете, замена css-трансформирования на анимацию javascript, вероятно, исправит ее.
Например, в вашей скрипке проблема также произошла с преобразованием шкалы, но не с аналогичной функцией анимации jQuery.
Кажется, что есть некоторые оттенки и стили, в которых сглаживание сглаживания менее очевидно (по крайней мере, в скрипке), поэтому вы также можете попробовать стилизовать заполнители и другой обработанный текст по-разному. (Эта тема может помочь в стилизации заполнителей, если вы идете по этому маршруту: Изменить цвет заполнителя ввода HTML5 с помощью CSS)
Благодаря выявлению сглаживания выше, а также в помощи из приведенных ниже статей, я изменил свой код, включив translate3d(0,0,0), и проблема исчезла:
-webkit-transition-duration: .17s, .17s translate3d(0,0,0);
Переход не такой гладкий, как когда-то, а субъект для другого вопроса.
Сглаживание текста Wonky при повороте с помощью webkit-transform в Chrome
http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/
Нет более актуальной темы, которую я нашел для проблемы, которую я имел, но связанной с вышеупомянутой проблемой. Таким образом, может быть полезно для некоторых.
В двух словах: у меня есть контейнер (popup), некоторый элемент внутри. Появление выглядит следующим образом: фон контейнера исчезает до темноты через непрозрачность, а элемент внутри расширяется (например, приближаясь к нам сзади). Все работает отлично везде, но не в 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-переключение (а также сделать его красивым, а не просто "display: none" ).
поэтому каким-то образом появление Safari (очевидно) наследовало свойства перехода, кроме "непрозрачности", даже когда я перегрузил их только -webkit -переходом: opacity.5s;
Таким образом, добавив следующее решение проблемы:
.container {
...
-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}
У меня была та же проблема, в то время как переход какой-то текст стал сглаженным. это происходит только в тексте привязки, который позиционируется относительно e с z-индексом внутри расположенного элемента и с самим z-индексом. если я удалю все позиции и индексирует проблему, исчезните.
Аналогичная проблема существует при использовании transition и translate3d. Иногда любой элемент на странице с стилями :hover показывает поведение наведения. У меня проблема с использованием слайдера. Поместите элемент -webkit-transform: translateZ(0); в элемент :hover, и его поведение нормальное.
Для rotation(), возможно, это хорошо, но для scale(). Он не работал с формулой -webkit-transform: translateZ(0);.
Я использовал:
-webkit-font-smoothing: antialiased;