CSS转换倾斜和缩放在Microsoft Edge中无法正常工作

时间：2018-11-02 17:15:11

标签： javascript jquery html css css-transforms

我在Microsoft Edge上出现歪斜和/或比例转换属性问题。转换可以在IE，Chrome和FF上完美运行，而在Edge中则不能。

以下是屏幕截图，以便为您提供视觉效果： screenshot of static element that will skew/scale on hover 如您所见，左右元素已经倾斜。它们还具有覆盖每个元素的链接，并且使用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>

1 个答案:

答案 0 :(得分：0)

我在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

相关问题
最新问题