Ms Edge CSS Transition Flickering

MS Edge CSS transition flickering

There's something about transition-property: all that's causing the descendant element to inherit the animated value during the transition, instead of keeping its specified value indefinitely, in Microsoft Edge. This appears to be so specific to Microsoft Edge's implementation of CSS transitions, that even Internet Explorer behaves correctly, and it only occurs when transition-property is all — if you specify only the properties that need transitioning, Microsoft Edge behaves correctly.

That's all I can tell you. Well, that, and the obvious fact that this is incorrect behavior.

How to stop flickering on css transform in microsoft edge?

Try this, you need to hover on the container.

#contentwrapper .bildswitch.zoomin.left_to_right:hover .img{

-webkit-transform: scale(0.4) translateX(0) translateY(-37%);
-moz-transform: scale(0.4) translateX(0) translateY(-37%);
transform: scale(0.4) translateX(0) translateY(-37%);
-ms-transform: scale(0.4) translateX(0) translateY(-37%);
-o-transform: scale(0.4) translateX(0) translateY(-37%);
z-index: 9999;
}
 .bildswitch.zoomin.left_to_right{
background: #666666;
}

Edge 40/15 opacity/visibility transition event propagation (flickering) bug?

Your transition-delay:0s is causing the problems. Setting it to a very low value should give you a good result: transition-delay: 0.01s

Here's your working codepen.

Glitch in perspective/transform transition on MS Edge

I can reproduce the issue in Edge Legacy. The door looks like jerking once when transforming. I thinks that's due to different rendering engines used in different browsers.

To solve this issue, you can use CSS transform perspective() function instead of CSS perspective property. The sample code is like below:

.wrapper {
  margin-left: 200px;
  /*perspective: 500px;*/
  perspective-origin: 0% 0%;
}

.flip {
  width: 100px;
  height: 200px;
  background: gold;
  transition: transform 4s;
  transform-origin: 0px 0px;
  transform: perspective(500px) rotateY(10deg);
}

.flip:hover {
  transform: perspective(500px) rotateY(-100deg);
}

<div class="wrapper">
  <div class="flip">
  </div>
</div>

CSS transition on SVG causes flickering IE11 and Edge

Instead of transitionning the width, use CSS Transform. Using transform: scale(0.5); and a transition targetting transform, you'll get what you're looking for without the need for a repaint and you'll get a much smoother animation.

Here is your updated fiddle : https://jsfiddle.net/kyawjn4s/1/

Weird CSS3 Transition (flickering)

I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!

---

Related Topics