如何停止在微軟邊緣的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; 
}