如何停止在微软边缘的CSS变换闪烁？

Question

我在Microsoft Edge中有CSS转换问题。在所有其他浏览器中，它运行良好。在Edge中，只要将鼠标移出转换后的图像，它就会闪烁。封装<a>标签不会改变其规格。有人知道这个问题的解决方案吗？

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; 
 
\t min-height:390px; 
 
    margin-top: -400px; 
 
\t 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; 
 
\t color: #ffffff; 
 
\t padding: 60px; 
 
\t 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/

Answer 1

试试这个，你需要悬停在容器上。

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