Вопрос по html, css, css3 – Странный переход CSS3 (мерцание)

34

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

See here
<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;
}

& # X200B;

Чего ты пытаешься достичь? Попробуйте удалить-webkit-transition и посмотрим, поможет ли это. Ilia Frenkel
удалите эту кнопку: hover {background: # ff3019; кнопка}: активна {background: # cf0404; } Jacob Anthony Tonna
я пытаюсь заставить его исчезнуть в другой цвет фона. Jürgen Paul

Ваш Ответ

8   ответов
100

-webkit-backface-visibility: hidden;& # Xbb; к элементам, которые вы переходите. Voil & # xE0 ;!

все еще мерцает
О боже, как ты это узнал? Jürgen Paul
Градиенты и переходы не работают вместе, кажется, единственный ответ:stackoverflow.com/questions/3790273/…
У меня была проблема, когда я перемещал непрозрачность элемента, к которой также применялась тень текста. Казалось, что исчезновение непрозрачности в сочетании с градиентным характером тени вызывает странное мерцание. -webkit-backface-visibility: скрыто исправлено! Хотя теперь, в 2015 году, вы можете просто добавить & quot; backface-visibility: hidden & quot; сбросить префикс -webkit.
0

HTML следующим образом:

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

CSS следующим образом:

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
0

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

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

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

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

1

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

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

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

Все еще определенно ошибка ...

9

исправляя надоедливую вспышку. Однако я использую масштаб преобразования, и SVG-анимация не будет резкой после масштабирования. Резко, если вы не используете свойство backface-visiblity.

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

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

-webkit-transform: translate3D(0, 0, 0);
Вы только что спасли мой вечер. Огромное спасибо!
1

CSS элемента, который мигает:

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

Обратите внимание, чтоlink-only answers are discouragedSO ответы должны быть конечной точкой поиска решения (в отличие от еще одной остановки ссылок, которая, как правило, со временем устаревает). Пожалуйста, рассмотрите возможность добавления отдельного краткого обзора здесь, сохраняя ссылку в качестве ссылки.
0

проблема в том, что вы переключаетесь с линейного градиентного фона на сплошной цвет фона для веб-браузеров 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%);

Я изменил верхний цвет линейного градиента, чтобы заметно изменить эффект наведения.

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

Больше нет проблем с перепрошивкой при наведении курсора на кнопку в Chrome или Microsoft Edge. Надеюсь, это поможет.

4

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

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

Более детально:http://screenflicker.com/mike/code/transition-gradient/

Похожие вопросы