如何为Internet Explorer禁用CSS“转换：翻译”功能？

Question

我已经使用剪切路径和CSS的悬停转换功能为下面的徽标设置了分割动画。但是，IE广告边缘不支持剪切路径。因此，我想在使用IE和Edge时禁用“转换：翻译”。

这是在IE上发生的事情（错误）：

这应该是怎么回事：

proposal

我已经尝试过在悬停类之前和之后使用-ms-transform: none !important;，但这在使用IE / Edge时似乎并没有禁用转换功能。

HTML：

<div class="image">

</div>

CSS：

  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 32% 0 ,32% 19%,  97% 100%, 0 100%);
  -ms-clip-path: none !important;
}

.image:after {
  clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-5px);
   -ms-transform: none !important;
}

.image:hover::after{
   transform:translate(20px,5px);
  -ms-transform: none !important;
}

IE / Edge的预期结果是识别该功能设置为无，并且将鼠标悬停在徽标上时没有动画。