CSS3 -webkit-transition задыхается от нескольких значений box-shadow и text-shadow. (Chrome & Safari)
Точнее, у меня есть два сценария ...
У меня есть текст с заголовком документа с тремя текстовыми тенями (для глубины). Я также использую правило -webkit-transition, чтобы изменить цвет тени для текста при наведении, чтобы он светился при наведении.
У меня есть ссылки, для которых я использую правило box-shadow так же, как и выше, с тремя значениями для эффекта глубины. Также с помощью -webkit-transition здесь можно изменить цвет кнопок и текста для эффекта наведения.
Проблема: для обоих приведенных выше примеров при наведении на элементы веб-набор отображает переход по одному, поэтому значения не все постепенно переходят в свои новые значения одновременно. Вместо этого они появляются при визуализации каждого из них - один за другим, и это очень неловкий переход, как вы увидите.
У меня есть несколько экземпляров, и вот ссылки на некоторые из них:
( обязательно просмотрите в Chrome или Safari )
-Текст-теневой переход включен: наведите курсор на страницу h1 (текст «ПОДАРОК ИСЦЕЛЕНИЯ»): http://cure.org/goh
-Переход к теням: включение при наведении на 1-й слайд с призывом к действию (кнопка «Подробнее»): http://cure.org
-Box-shadow переход на: наведите курсор на навигационные ссылки нижнего колонтитула (About, Rods и т. Д.): http://tuscaroratackle.com
Наконец, вот пример кода, который я использую:
( Не с какого-либо сайта, просто пример, который я создал для этого вопроса; смотрите его вживую здесь: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</body>
</html>
Таким образом, вопрос здесь действительно заключается в том, есть ли способ предотвратить упорядоченный рендеринг, например, использовать другой синтаксис в моем CSS? (например, определенный порядок нескольких значений box-shadow или использование нескольких объявлений box-shadow вместо добавления их всех в одно правило?)
05/09/2011 ОБНОВЛЕНИЕ: Об ошибке было сообщено в Webkit (см. Комментарий Husar ниже). Кроме того, я вижу, что последние сборки Chrome (в частности, моя текущая версия 10.0.648.205) теперь делают плавный переход, эффективно устраняя ошибку. Однако Safari (версия 5.0.5 (6533.21.1)) по-прежнему отображает некорректный рендеринг.