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

Ответ 1

Я боролся с подобной проблемой. Для меня случайные ссылки на странице стали явно смелыми (что-то вроде 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-градусное вращение изображения с некоторой коробкой-тенью, появляющейся в одно и то же время. В моей ситуации это, к сожалению, не уменьшило использование ЦП.

Ответ 2

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

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

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

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

Ответ 3

Благодаря выявлению сглаживания выше, а также в помощи из приведенных ниже статей, я изменил свой код, включив 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/

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

Ответ 4

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

В двух словах: у меня есть контейнер (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;
}

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

-webkit-font-smoothing: antialiased;