Transition CSS3 bizarre (scintillement))
quand j'approche mon bouton, il donne un flash blanc en premier lors du démarrage de la transition. Pourquoi est-ce que ça clignote quand j'applique une transition css3 à mon bouton? mon navigateur est Google Chrome
voir 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;
}
8 réponses
je me suis débarrassé du scintillement. Ajouter " -webkit-backface-visibility: hidden; " aux éléments que vous transitionnez. Voilà!
Miguel a raison à propos de backface-visiblity réparer le flash ennuyeux. Cependant, j'utilise transform scale et le SVG animé ne sera pas net après scaling. Elle est forte si vous n'utilisez pas la propriété backface-visiblity.
donc soit vous avez une belle animation avec un graphique flou, ou un beau graphique avec des flashs d'écran.
vous pouvez cependant ajouter la ligne suivante au parent de l'objet à transitionner, qui fixera la clignotement de l'écran et rend toujours votre graphique net après mise à l'échelle.
-webkit-transform: translate3D(0, 0, 0);
je crois qu'il s'agit actuellement d'un problème sans solution. Moi aussi, je suis tombé dessus avant de jouer et je n'ai pas réussi à le faire fonctionner. Utiliser une couleur unie semble être très bien, ou faire semblant avec une image de fond.
question similaire ici: prise en charge par Webkit des transitions de gradient
plus de détails: http://screenflicker.com/mike/code/transition-gradient /
le clignotant que vous remarquez est en fait la couleur de fond du bouton étant changé en transparent (donc, le bouton" clignote " ou devient blanc dans votre violon parce que la couleur de fond du corps est blanc).
si vous superposez votre bouton sur un autre élément avec la même taille/hauteur/Couleur de fond exacte (y compris les gradients), le" clignotant " ne sera pas perceptible.
Cochez ici pour un exemple en utilisant votre violon: http://jsfiddle.net/hrDff/12 /
reste définitivement un bug tho...
ce lien l'a réparé pour moi. Il suffit d'ajouter une ligne au css de l'élément qui clignote:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
je pense que le problème est que vous passez d'un fond de pente linéaire à une couleur de fond solide pour Google Chrome et Microsoft Edge navigateurs web. Pour corriger ce problème, vous ajouteriez un arrière-plan de gradient linéaire similaire à vos pseudo classes, dans ce cas le :hover et le :active. Je l'ai essayé moi-même sur votre jsfiddle et je n'ai pas eu de clignotement dans le rendu tout en planant sur 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 changé le couleur supérieure du gradient linéaire pour donner un changement notable à l'effet de vol stationnaire.
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%);
}il n'y a plus de problèmes avec le clignotement lorsque je survole le bouton dans Chrome ou Microsoft Edge. J'espère que cette aide.
avec un problème similaire, les suggestions de Jan ont aidé à améliorer pour toutes les images de fond sauf une. Je me suis débarrassé du scintillement du dernier en remarquant deux règles de positionnement contradictoires. J'ai eu un position:static une règle margin-top:-3em (moins) et l'autre margin-top:5em (plus). Par conséquent, je vous suggère de vérifier soigneusement la cohérence du positionnement lorsque vous éprouvez un tel problème.
dans votre cas Michelle, j'ai testé avec un délai plus long de 1s à 3s, ce qui m'a aidé à comprendre ce qu'est cette étape plus claire, un flash avec un délai très court. Votre gradient commence avec aucun fond en fait et ce que vous voyez est le fond de la page. J'ai obtenu cette information en changeant le fond du corps de ma page test de l'Ivoire au noir.
quand j'ai essayé votre dégradé sur un fond noir, j'ai eu une scène/flash noir (plus facile à voir à 3s). Il faudrait peut-être sage de tester la commande de vos règles, et aussi essayer de comprendre pourquoi le gradient commence à partir de l'arrière-plan du corps ou du parent et non de votre arrière-plan.
une solution de contournement pourrait être de régler votre bouton dans un div avec votre bouton fond rouge à la taille exacte et la forme de votre bouton.
j'ai résolu le clignement 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);
}