Search code examples
cssgoogle-chrometransforminternet-explorer-11

css transform translateY not working in ie 11 but working with chrome

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:

<html>
<head><title>Demo</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta charset="utf-8">
</head>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
    integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
    crossorigin="anonymous"></script>

<body>
    <div id="panel">
        <div id="panel-content">

        </div>
    </div> 
</body>
</html>
<script>



$(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);
        });   

    });

});



</script>
<style>

#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%;

}


</style>
Solution

  • It happens cause you put position: fixed in #panel-content so in the ie11 the page is going to be his parent, height: 100% would be the height of the page not the #panel's height

    You don't need to use javascript to do this hover, you can do that with this code

    here is a fiddle

    HTML 

    <html>
<head><title>Demo</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta charset="utf-8">
</head>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
    integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
    crossorigin="anonymous"></script>

<body>
    <div id="panel">
        <div id="panel-content">

        </div>
    </div> 
</body>
</html>

    CSS

    body 
{
 overflow-x: hidden;
}

#panel
{
    position: fixed;
    right: 0;
    height:180px;
    width:27px;
    margin-top: 50vh;
    transform: translateY(-50%);  


}

#panel-content
{
    border-radius: 10px 0px 0px 10px;
    left: 100%;
    position: absolute;
    background: black;
    height:100%;
    width: 100%
    transition: .2s;
}

#panel:hover #panel-content{
    left: 0;
}