如何停止Microsoft Edge中CSS转换上的闪烁? [英] How to stop flickering on css transform in microsoft edge?

问题描述

我在Microsoft Edge中遇到CSS转换问题.在所有其他浏览器中，它运行良好.一旦将鼠标移出转换后的图像，它就会在Edge中闪烁.封闭的<a>标记与其规格没有变化.有人知道这个问题的解决方案吗?

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/

推荐答案

尝试一下，您需要将鼠标悬停在容器上.

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

这篇关于如何停止Microsoft Edge中CSS转换上的闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！