How to stop flickering on css transform in microsoft edge?

问题

I have a problem with a CSS transformation in Microsoft Edge. In all other browsers it runs fine. In Edge it's flickering as soon you move the mouse out of the transformed image. The enclosing <a> tag does not change from its specifications. Does someone know the solution for this issue?

transform: scale(0.4) translateX(0) translateY(-37%);

.bildswitch {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.bildswitch,
.bildswitch * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bildswitch a {
  color: #333;
  cursor:default;
  text-decoration:none;
}

.bildswitch a:hover {
  text-decoration: none;
}

.bildswitch img {
  width: 100%;
  height: 100%;
  transform: none;
}

.bildswitch .img {
  position: relative;
  width: 100%;
  height: 390px;
  border-radius: 0;
}

.bildswitch .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  z-index: 9999;
}


.bildswitch .img img {
  border-radius: 0;
}

.bildswitch .info {
    backface-visibility: hidden;
    border-radius: 0;
    bottom: 0;
    left: 0;
	min-height:390px;
    margin-top: -400px;
	margin-bottom:30px;
    position: relative;
    right: 0;
    text-align: center;
}

.bildswitch .info .icons {
  margin-top: 90px;
  font-size: 26px;
  color: #ffffff;
}

.bildswitch .info .icons i {
  margin-right: 5px;
}

.bildswitch.zoomin .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;

}

.bildswitch.zoomin.colored .info {
  background: #76b9d7;
}

.bildswitch.zoomin .info {
  background: #666666;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.bildswitch.zoomin .info h3 {
  color: #FFFFFF;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 14px 0 0 0;
  height: 110px;
}

.bildswitch.zoomin.left_to_right a:hover .img {
  -webkit-transform: scale(0.4) translateX(0) translateY(-37%);
  -moz-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%);
  transform: scale(0.4) translateX(0) translateY(-37%);
  z-index: 9999;
}

.bildswitch.zoomin.left_to_right a:hover .info {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.bildswitch h3 {
    color: #fff;
    font-family: open sans;
    font-size: 26px;
    letter-spacing: 2px;
    margin-top: 13px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 9999;
}

.info > p {
    padding-top: 250px !important;
    font-family: open sans,Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4rem;
    text-align: center;
	color: #ffffff;
	padding: 60px;
	text-decoration:none;
}

<div id="contentwrapper">
    <div class="bildswitch zoomin left_to_right"><a href="javascript:return false;">
    <h3 class="lightred">headline</h3>
        <div class="img"><img src="https://www.kern-haus.de/fileadmin/_processed_/8/8/csm_kern-haus-bauhaus-ixeo-eingangsseite_f9ab9be214.jpg" alt="img"></div>
        <div class="info">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
        </div></a>
     </div>
</div>

https://jsfiddle.net/mwra8ahd/6/

回答1:

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

来源：https://stackoverflow.com/questions/45826245/how-to-stop-flickering-on-css-transform-in-microsoft-edge