CSS Transform Skew & Scale not working properly in Microsoft Edge

Question

I'm having an issue with skew and/or scale transform property on Microsoft Edge. The transforms work perfect on IE, Chrome and FF, but not in Edge.

Here is a screenshot so to give you a visual: As you can see the left and right elements are already skewed. They also have a link overlaying each element, and the hover effect is activated using jQuery.

In Edge, when you hover over the element the skew changes, even though I don't want it to change. It's supposed to stay the same degree whether it's hovered or not. What's weird is that it's not like it's completely removing the skew's degree I set, it's only changing it by a few degrees or so. I can't actually tell though.

I do have prefixes in place, and it doesn't seem to matter what I change it still does not work right.

Here's a demo of the issue: 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

I tried it on Edge (Microsoft Edge 42.17134.1.0) and I was getting weird stuff too. It looks like Edge has a problem with animating those nested transforms you have from the hover.

Here is something that works though to get around it. Instead of updating the inner skew on hover (.image), update the outer skew (.img-wrapper). I got rid of the [.split-container .image.hover] CSS entries entirely. Here is the relative CSS for the new hover transforms.

.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%);
}

Notice that for the .split-life, since it is offset 50%, it has to be translated so that it's scale and skew are center based, and then translated back. If we didn't do this the scale would cause the image to line up incorrectly on the red division line.

Here is an updated codepen based on your original.

Demo working on my version of Edge