title: How to disable CSS 'transform: translate' feature for Internet Explorer?
body: <p>I have set up a split animation for the Logo below using clip-path and hover transform features using CSS. However, clip-path is not supported on IE ad Edge. Therefore, I would like to disable the 'transform: translate' when using IE and Edge.</p>
  
  <p>This is what happens on IE (wrong):</p>
  
  <p><img src="https://i.ibb.co/RH01QHY/wrong.png" alt="logo"></p>
  
  <p>This is what should be happening:</p>
  
  <p><a href="https://i.stack.imgur.com/La119.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/La119.png" alt="right"></a></p>
  
  <p>I have already tried using <code>-ms-transform: none !important;</code> under the before and after hover classes but this doesn't seem to disable the transform feature when using IE/Edge.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="image"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  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;
  }
  </code></pre>
  
  <p>The expected result is for IE/Edge to recognise that the feature is set to none and for there to be no animation upon hovering over the Logo.</p>