javascript - CSS Transform Skew 和 Scale 在 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%，因此必须对其进行平移，以便其缩放和倾斜基于中心，然后再平移回来。如果我们不这样做，比例尺会导致图像在红色分界线上的排列不正确。

这是一个基于您的原始代码的更新代码笔。

Demo working on my version of Edge