title: css transform translateY not working in ie 11 but working with chrome
body: <p>Basically i am trying to create a side panel placed on the right that works in both ie11 and chrome when hovering on top of it, it opens and when coming out it closes.So this is the code works well in chrome but not in ie11. In ie11 it spreads through the bottom half of the view i would like it to cover part of the middle and to be perfectly positioned in the middle. Any help would be much appreciated. I figured out that the problem is in the css transform:translateY tried -ms-transform -webkit-transform nothing is working. .Here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Demo&lt;/title&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
   &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  
  &lt;script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script
      src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
      integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
      crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;body&gt;
      &lt;div id="panel"&gt;
          &lt;div id="panel-content"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
  
  
  
  $(function () { 
      //Function to  show side panel on hover
      var $pCont = $("#panel-content");
      $pCont.width(0);
      $('#panel').mouseenter(function(){
          $pCont.stop().animate({width:  27}, 200);
      });
      //Animation for closing the sidepanel when mouseleave 
      $('#panel').mouseleave(function(){
          $("#panel-collapse").hide("slide", { direction: "right" }, 300,function(){
              $pCont.stop().animate({width:  0}, 200);
          });   
  
      });
  
  });
  
  
  
  &lt;/script&gt;
  &lt;style&gt;
  
  #panel
  {
      position: fixed;
      right: 0;
      height:180px;
      width:27px;
      margin-top: 50vh;
      transform: translateY(-50%);  
  
  
  }
  
  #panel-content
  {
      border-radius: 10px 0px 0px 10px;
      position: fixed;
      right: 0;
      background: black;
      height:100%;
  
  }
  
  
  &lt;/style&gt;
  </code></pre>