Странный переход CSS3 (мерцание)

Когда я нахожусь на моей кнопке, она начинает белую вспышку при начале перехода. Почему это похоже на мерцание, когда я применяю переход css3 к моей кнопке? Мой браузер Google Chrome

См. здесь

<button>Log In</button>

CSS

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

Ответ 1

Я избавился от мерцания. Добавьте "-webkit-backface-visibility: hidden;" к элементам, которые вы переходите. Вуаля!

Ответ 2

Мигель прав насчет видимости на заднем плане, фиксируя раздражающую вспышку. Тем не менее, я использую масштаб преобразования, и анимированный SVG не будет резким после масштабирования. Это резко, если вы не используете свойство обратной видимости.

Итак, либо вы получили приятную анимацию с размытой графикой, либо красивую графику с экранными вспышками.

Однако вы можете добавить следующую строку к родительскому объекту, который будет перенесен, что устранит мигание экрана и по-прежнему сделает вашу графическую резкость после масштабирования.

-webkit-transform: translate3D(0, 0, 0);

Ответ 3

Я считаю, что это проблема без исправления. Я тоже сталкивался с этим, прежде чем играть и не мог заставить его работать. Использование сплошного цвета кажется прекрасным или притворяется фоновым изображением.

Аналогичный вопрос здесь: Поддержка Webkit для переходов градиента

Подробнее: http://screenflicker.com/mike/code/transition-gradient/

Ответ 4

Мерцание, которое вы заметили, на самом деле цвет фона кнопки меняется на прозрачный (так, кнопка "мигает" или становится белой в вашем Fiddle, потому что фоновый цвет тела белый).

Если вы наложите свою кнопку поверх другого элемента с тем же размером/высотой/фоном (включая градиенты), "мерцание" не будет заметным.

Посмотрите здесь пример, используя вашу скрипту: http://jsfiddle.net/hrDff/12/

По-прежнему определенно ошибка...

Ответ 5

Эта ссылка исправила это для меня. Вам просто нужно добавить строку в css элемента, который мерцает:

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

Ответ 6

Я думаю, проблема заключается в том, что вы переключаетесь с фона линейного градиента на сплошной цвет фона для браузеров Google Chrome и Microsoft Edge. Чтобы исправить эту проблему, вы добавили бы подобный линейный градиентный фон к вашим псевдоклассам, в этом случае: hover и.: Active. Я попробовал это самостоятельно на вашем jsfiddle, и у меня не было мерцания в рендеринге, когда он зависал над кнопкой.

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

Ответ 7

С подобной проблемой предложения Джона помогли улучшить все фоновые изображения, кроме одного. Я избавился от мерцания последнего, заметив два противоречащих правила позиционирования. Я имел для position:static одно правило margin-top:-3em (минус), а другое margin-top:5em (плюс). Таким образом, я предлагаю вам внимательно проверить согласованность позиционирования при возникновении такой проблемы.

В твоем случае Мишель, я тестировал с более длинной задержкой от 1 до 3 секунд, что помогло мне понять, что такое более ясный этап, вспышка с очень небольшой задержкой. Ваш градиент начинается без фактического фона и то, что вы видите, является фоном страницы. Я получил эту информацию, изменив фон тела моей тестовой страницы от слоновой кости до черного.

Когда я попробовал свой градиент на черном фоне, я получил черную сцену/вспышку (ее легче было увидеть на 3 секунды). Возможно, было бы разумно проверить порядок ваших правил, а также попытаться понять, почему градиент начинается с фона тела или родителя, а не из вашего фона.

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