CSS轉換傾斜和縮放在Microsoft Edge中無法正常工作

Question

我在Microsoft Edge上出現傾斜和/或比例轉換屬性問題。 轉換可以完美地在IE，Chrome和FF上正常運行，但在Edge中卻不能。

這是一個屏幕截圖，以便為您提供視覺效果： 如您所見，左右元素已經傾斜。 它們還具有覆蓋每個元素的鏈接，並且使用jQuery激活了懸停效果。

在Edge中，當您將鼠標懸停在元素上時，即使我不希望其發生變化，偏斜也會發生變化。 無論是否懸停，都應該保持相同的程度。 奇怪的是，這並不能完全消除我設置的偏斜度，而只是將其改變了幾個度左右。 我實際上無法分辨。

我確實有前綴，而且我更改什么似乎都沒關系，它仍然無法正常工作。

這是該問題的演示 ： https : //codepen.io/anon/pen/BGBeab

 $(".split-biz").hover(function() { $(this).toggleClass("active"); $(this).find(".image").toggleClass("hover"); $(this).parent().find(".left").toggleClass("hover"); }); $(".split-life").hover(function() { $(this).toggleClass("active"); $(this).find(".image").toggleClass("hover"); $(this).parent().find(".right").toggleClass("hover"); }); $(".text .left").hover(function() { $(this).parents(".split-container").find(".split-biz .image").toggleClass("hover"); $(this).toggleClass("hover"); }); $(".text .right").hover(function() { $(this).parents(".split-container").find(".split-life .image").toggleClass("hover"); $(this).toggleClass("hover"); }); 

 .split-container { overflow: hidden; position: relative; width: 100%; height: 100%; } .split-container:after { content: ''; position: absolute; left: -webkit-calc(50% - 5px); left: -moz-calc(50% - 5px); left: calc(50% - 5px); right: 0; top: 0; bottom: 0; width: 10px; height: 100%; background: rgb(237, 28, 36); z-index: 2; -webkit-transform: scale(1.0) skew(-35.8deg); -moz-transform: scale(1.0) skew(-35.8deg); -ms-transform: scale(1.0) skew(-35.8deg); -o-transform: scale(1.0) skew(-35.8deg); transform: scale(1.0) skew(-35.8deg); } .split-biz { position: relative; left: 0; top: 0; bottom: 0; width: 66.5625VW; height: 35.270833vw; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .split-life { position: absolute; right: -17.05vw; top: 0; bottom: 0; width: 66.5625VW; height: 35.270833vw; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .split-biz .img-wrapper { height: 34.270833vw; margin: 0 0 0 -15.94vw; -webkit-transform: scale(1.0) skew(-35.8deg); -ms-transform: scale(1.0) skew(-35.8deg); -moz-transform: scale(1.0) skew(-35.8deg); -o-transform: scale(1.0) skew(-35.8deg); transform: scale(1.0) skew(-35.8deg); overflow: hidden; position: relative; z-index: 1; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .split-life .img-wrapper { height: 35.270833vw; margin: 0 0 0 3px; -webkit-transform: scale(1.0) skew(-35.8deg); -ms-transform: scale(1.0) skew(-35.8deg); -moz-transform: scale(1.0) skew(-35.8deg); -o-transform: scale(1.0) skew(-35.8deg); transform: scale(1.0) skew(-35.8deg); overflow: hidden; position: relative; z-index: 1; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .split-biz .image { background: url(http://nnrda.wpengine.com/wp-content/uploads/2018/10/services-business.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; position: absolute; top: 0vw; left: 0; right: 0; bottom: 0vw; -webkit-transform: scale(1.0) skew(35.8deg); -ms-transform: scale(1.0) skew(35.8deg); -moz-transform: scale(1.0) skew(35.8deg); -o-transform: scale(1.0) skew(35.8deg); transform: scale(1.0) skew(35.8deg); -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .split-life .image { background: url(http://nnrda.wpengine.com/wp-content/uploads/2018/10/services-lifestyle.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; position: absolute; top: 0; left: -12.95vw; right: 0; bottom: 0; -webkit-transform: scale(1.0) skew(35.8deg); -ms-transform: scale(1.0) skew(35.8deg); -moz-transform: scale(1.0) skew(35.8deg); -o-transform: scale(1.0) skew(35.8deg); transform: scale(1.0) skew(35.8deg); -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .split-container .image.hover { -webkit-transform: scale(1.05) skew(35.8deg); -moz-transform: scale(1.05) skew(35.8deg); -ms-transform: scale(1.05) skew(35.8deg); -o-transform: scale(1.05) skew(35.8deg); transform: scale(1.05) skew(35.8deg); } .split-container .text div.hover { background: #ed1c24; } .text { z-index: 1; font-size: 28px; width: 100%; position: absolute; top: 40.5%; /* bottom: 0; */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; z-index: 3; } .text .left, .text .right { background: rgba(237, 28, 36, .75); line-height: 1; color: #fff; -webkit-transform: scale(1.0) skew(-36.2deg, 0); -ms-transform: scale(1.0) skew(-36.2deg, 0); -moz-transform: scale(1.0) skew(-36.2deg, 0); -o-transform: scale(1.0) skew(-36.2deg, 0); transform: scale(1.0) skew(-36.2deg, 0); -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .text .left { left: 0; padding: 1.5vw 3vw; position: relative; } .text .right { padding: 1.5vw 3vw; position: relative; left: 0; } .text a { -webkit-transform: scale(1.0) skew(36.2deg, 0); -moz-transform: scale(1.0) skew(36.2deg, 0); -ms-transform: scale(1.0) skew(36.2deg, 0); -o-transform: scale(1.0) skew(36.2deg, 0); transform: scale(1.0) skew(36.2deg, 0); display: inline-block; color: #fff; font-weight: 500; font-size: 2.75vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="split-container"> <div class="split-biz"> <a href="#"> <div class="img-wrapper"> <div class="image"></div> </div> </a> </div> <div class="split-life"> <a href="#"> <div class="img-wrapper"> <div class="image"></div> </div> </a> </div> <div class="text"> <div class="left"><a href="#">For Your Business</a></div> <div class="right"><a href="#">For Your Lifestyle</a></div> </div> </div> 

Answer 1

我在Edge（Microsoft Edge 42.17134.1.0）上進行了嘗試，我也得到了一些奇怪的東西。 看起來Edge在將來自懸停的嵌套轉換動畫化方面存在問題。

這是可以解決問題的方法。 而不是更新懸停（.image）上的內部偏斜，而是更新外部偏斜（.img-wrapper）。 我完全擺脫了[.split-container .image.hover] CSS條目。 這是新的懸停轉換的相對CSS。

.split-container .split-biz .img-wrapper.hover {
          transform: scale(1.05) skew(-35.8deg);
}

.split-container .split-life .img-wrapper.hover {
          transform: translate(-50%) scale(1.05) skew(-35.8deg) translate(50%);
}

請注意，.split-life的偏移量為50％，因此必須對其進行轉換，使其比例和偏斜基於居中，然后再轉換回。 如果不這樣做，縮放比例將導致圖像在紅色分割線上的排列不正確。

這是根據您的原始版本更新的代碼筆。

演示適用於我的Edge版本