Есть ли способ заставить Chrome делать переходы CSS с буквенным интервалом плавно?

Я пытаюсь получить хороший переход CSS для свойства letter-spacing.

Он отлично выглядит в Firefox и Internet explorer 10 (что-то, наконец, работает в IE. Omg, правда?)

Но это не работает в Chrome или Opera. В Chrome это серия неудобств, поэтому она идет от 2px до 1px до 0. Нет плавного пиксельного рендеринга, как в IE/Firefox.

Есть ли способ заставить Chrome сделать это плавно?

Вот простой пример:

p {
    letter-spacing:2px; 
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:0;}

http://jsfiddle.net/aDhRz/

Ответ 1

Эта проблема теперь исправлена в Blink (включение механизма компоновки Chrome), но еще не развернута в стабильном Chrome. Но теперь вы можете видеть, что он отлично работает в Chrome Canary.

Пока это не доступно для всех, я не думаю, что это будет без решения JavaScript с использованием canvas. Нам повезло, что автообновление Chrome:)

Исправить ошибку: http://src.chromium.org/viewvc/blink?view=revision&revision=153727

Похоже, что Google серьезно относится к разработке Blink, потому что эта ошибка существует в WebKit с 2008 года, и она по-прежнему не исправлена.

Отчет об ошибке WebKit: https://bugs.webkit.org/show_bug.cgi?id=20606

Ответ 2

Если у вас возникли проблемы с производительностью в Chrome, вы можете попробовать заставить элемент на GPU, где он отображается на его собственном слое. Это можно сделать, используя translate3d

Пример

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

Также стоит использовать хронологию хронологических инструментов, чтобы сузить проблему.

Профилирование производительности с временной шкалой

Ответ 3

В вашем примере Невозможно получить его гладким, так как переход уменьшается на 1px на каждом шаге, он работает так же, как любое другое свойство css, которое использует пиксели, если вы увеличиваете px, вы увидите, что он действительно сделать плавно, как в этом примере Демо

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

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

Итак, все это и выясняя, что он делает то же самое на каждом свойстве, если вы добавляете такую комбинацию (изменение + переход), я бы сказал, что это ошибка не.

Ответ 4

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

p {
letter-spacing:0.5em; 
-webkit-transition: letter-spacing, 0.5s;
-moz-transition: letter-spacing, 0.5s;
-o-transition: letter-spacing, 0.5s;
transition: letter-spacing, 0.5s;
}
p:hover {
letter-spacing:0em;
}

http://jsfiddle.net/Q7Cvd/

Ответ 5

Используйте этот

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

перед тегом. Это должно решить вашу проблему.

Причины использования этого объясняются ниже Юккой К. Корпелой в теме .

В стандарте SGML в объявлении типа документа указывается Определение типа документа, называя его, как зарегистрировано W3C. Однако по спецификации HTML 4.01 документ должен иметь один из трех альтернативные декларации типа документа, и все они содержат URL-адрес, тоже.

Это как таковая теория, поскольку браузеры фактически не читают DTD. Они рассматривают декларации типа документа так же, как магические строки, в doctype sniffing. Однако в большинстве браузеров выбор браузеров режим зависит от наличия или отсутствия URL-адреса в этой магии строка для HTML 4.01 Transitional. Когда он отсутствует, они действуют в Режим Quirks. Когда он присутствует, большинство браузеров работают в "стандартах" режим "или" почти стандартный режим ".

Режим Quirks означает большое количество различных причуд, поэтому эффект переход от него к" стандартным режимам" может означать что угодно (варьируя от эффекта до полного бедствия). Такой переключатель обычно требует тщательной проверки, если не переписать весь документ.

Ответ 6

Попробуйте это

p {
    letter-spacing:2px; 
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
p:hover {letter-spacing:0;}

Ответ 7

Почему бы не использовать немного jQuery для решения этой проблемы. Вот скрипка http://jsfiddle.net/aDhRz/

(function(){
  $('p').hover(function(){
     $(this).toggleClass('zero');
  });
})();

И css

.zero{
  letter-spacing:0;
}