マイクロソフトのエッジでCSS変換のフリッカーを止めるには？

Question

Microsoft EdgeのCSS変換に問題があります。それ以外のブラウザでは正常に動作します。エッジでは、変換された画像からマウスを動かすとすぐにちらつきます。同封の<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; 
}