Переход CSS3 встраивает шрифты в webkit?

Ответ 1

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

Там несколько связанных потоков относительно слияния webkit, но мне лично не повезло, сохраняя тип как тип и все еще используя преобразования.

Ответ 2

Я думаю, что у меня была аналогичная проблема, и что исправлено для меня было добавление

-webkit-font-smoothing: antialiased;

моему телу css. Когда происходит анимация любого рода, webkit пытается сгладить текст, чтобы помочь с анимацией, поэтому добавление его для начала, чтобы оно не менялось или выглядело иначе.

Ответ 3

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

#footer {
    bottom: 0;
    left: 330px;
    right: 100px;
    height: 75px;
    background-color: #231f20;
    min-width: 540px;
    min-height: 75px;
    position: fixed;
    z-index: 10;
}

внутри нижнего колонтитула я

#cityNav > ul > li a {
            font-size: 24px;
            text-transform: uppercase;
            position: relative;
            z-index: 110;
            line-height: 24px;
            height: 24px;
            display: block;
        }

и это мой переход

.circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #ff0000;
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-indent: -999em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: all .2s ease-out; 
        -moz-transition: all .2s ease-out; 
        -o-transition: all .2s ease-out; 
        transition: all .2s ease-out;
    }
    .circle:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }

Ответ 4

У меня была эта проблема в Chrome для OSX. С помощью -webkit-backface-visibility: hidden; исправлена ​​проблема.

Ответ 5

Я столкнулся с этой проблемой много раз и добился успеха, добавив следующий css в анимированный элемент:

z-index: 60000;
position: relative;

Кажется, что оба индекса z и позиция должны быть эффективными. В моем случае я использовал его с Font Awesome анимационными прядильщиками.

Ответ 6

Как указано выше, -webkit-font-smoothing: antialiased; работает на рабочем столе Safari. Но на iOS вам нужно использовать -webkit-backface-visibility: hidden;, чтобы исправить это.

Ответ 7

Я не совсем уверен в причине, почему это происходит, но похоже, что когда ваш элемент .geartwo (100px x 100px) перекрывает ваш текст, он, кажется, облегчает его. Когда он откатывается от него, он возвращается к норме. Я тоже замечаю это только в браузерах webkit.

Чтобы исправить это, вы можете установить шестерни width и height на 40px (что размер изображения в любом случае - я не вижу необходимости, чтобы он составлял 100px x 100px), и затем переместите его соответствующим образом.

EDIT: Я не уверен, что вам нужно сделать это после моего предложения, но я нашел эту связанную дискуссию после небольшого поиска.

Ответ 8

Пока -webkit-backface-visibility: hidden; является частичным решением; это действительно разрушает отображение вашего текста, особенно если у вас есть сглаживание /AA включен. Эта ошибка также неприятна, потому что это происходит только тогда, когда вы также используете свойство transform.

После примерно двух лет спорадического посещения этой темы раз в два месяца, я нашел исправление. Вам нужно добавить position:relative к элементу css, который анимируется. Существует уловка, хотя вам нужно дать значение z-index, которое больше или меньше, чем элемент, который вы видите искажением на. Это фиксирует его на 100%.

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

Ответ 9

Для iOS8 единственным способом, с помощью которого удалось удалить мерцание преобразования, было добавление

body * { -webkit-transform: translate3d(0, 0, 0); }

в мою таблицу стилей.

Ответ 10

Все, что вам нужно сделать, это добавить это правило CSS в любой элемент, на который вы видите мерцание:

 -webkit-transform-style: preserve-3d;

И что это.