web-dev-qa-db-fra.com

Bizarre transition CSS3 (scintillement)

Lorsque je passe sur mon bouton, il émet un éclair blanc au début de la transition. Pourquoi cela clignote-t-il lorsque j'applique une transition CSS3 à mon bouton? Mon navigateur est Google Chrome

Vois ici

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

Le plus grand centre commercial

htmlcsscss3css-transitions
34
Jürgen Paul

Je me suis débarrassé du scintillement. Ajoutez «-webkit-backface-visibility: hidden;» aux éléments que vous effectuez la transition. Voilà!

100
Miguel Ángel Arroyo Rosales

Miguel a raison sur la visibilité arrière corrigeant le flash ennuyeux. Cependant, j'utilise l'échelle de transformation et l'animation SVG ne sera pas nette après la mise à l'échelle. Elle est nette si vous n'utilisez pas la propriété backface-visiblity.

Vous avez donc soit une animation Nice avec un graphique flou, soit un joli graphique avec des flashes d’écran.

Vous pouvez cependant ajouter la ligne suivante au parent de l'objet à faire la transition, ce qui corrigera le clignotement de l'écran tout en rendant votre graphique net après la mise à l'échelle.

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

Je crois que c'est actuellement un problème sans solution. Moi aussi, je suis tombé dessus avant de jouer et je ne pouvais pas le faire fonctionner. Utiliser une couleur unie semble aller, ou simuler avec une image d’arrière-plan.

Question similaire ici: Prise en charge de Webkit pour les transitions de dégradé

Plus de détails: http://screenflicker.com/mike/code/transition-gradient/

4
Graham Conzett

Le scintillement que vous remarquez est en fait la couleur d'arrière-plan du bouton qui devient transparente (le bouton "clignote" ou devient blanc dans votre Fiddle car la couleur d'arrière-plan du corps est blanche).

Si vous superposez votre bouton au-dessus d'un autre élément avec exactement la même taille/hauteur/couleur de fond (y compris les dégradés), le "scintillement" ne sera pas perceptible.

Consultez ici un exemple utilisant votre violon: http://jsfiddle.net/hrDff/12/

Toujours certainement un bug ...

1
Funktr0n

Ce lien l'a corrigé pour moi. Il vous suffit d'ajouter une ligne au fichier css de l'élément qui scintille:

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

1
Dave

Avec un problème similaire, les suggestions de Jan ont permis d'améliorer toutes les images d'arrière-plan, sauf une. Je me suis débarrassé du scintillement du dernier en remarquant deux règles de positionnement contradictoires. J'avais pour position:static une règle margin-top:-3em (moins) et l'autre margin-top:5em (plus). Ainsi, je vous suggère de vérifier soigneusement la cohérence du positionnement lorsque vous rencontrez un tel problème.

Dans votre cas, Michelle, j'ai testé avec un délai plus long, de 1 à 3 s, ce qui m'a permis de comprendre en quoi consiste cette étape plus claire, un flash avec un très court délai. Votre dégradé commence en fait sans arrière-plan et ce que vous voyez est l'arrière-plan de la page. J'ai obtenu cette information en changeant le fond du corps de ma page de test de ivoire à noir. 

Lorsque j’ai essayé votre dégradé sur un fond noir, j’ai eu une scène/un flash noirs (plus facile à voir à 3s) . l'arrière-plan du corps ou du parent et non de votre arrière-plan.

Une solution de contournement pourrait consister à définir votre bouton dans une div avec son arrière-plan rouge à la taille et la forme exactes de votre bouton.

0
Irene S.

J'ai résolu le clignotement comme ceci:

Html comme suit:

<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 comme suit:

.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
Youth overturn

Je pense que le problème est que vous passez d'un arrière-plan à dégradé linéaire à une couleur d'arrière-plan unie pour les navigateurs Web Google Chrome et Microsoft Edge. Pour résoudre ce problème, vous ajouteriez un arrière-plan à dégradé linéaire similaire à vos pseudo-classes, dans ce cas les propriétés: hover et: active. Je l'ai essayé moi-même sur votre jsfiddle et je n'ai eu aucun clignotement dans le rendu en survolant le bouton.

        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%);

J'ai modifié la couleur supérieure du dégradé linéaire pour modifier considérablement l'effet de survol.

 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%);
   }

Le clignotement ne pose plus aucun problème lorsque je survole le bouton dans Chrome ou Microsoft Edge. J'espère que ça aide.

0
subutai5467