Why does an overlay not work in IE?

Question

I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?

This picture shows the normal version which I want to work in IE. At the Moment it looks like this in IE.

    $('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.overlay').slideUp();
	$parent_box.find('.overlay').slideToggle(1000, 'swing');
    });


    $('.overlay').on('click', function() {
	$parent_box.find('.overlay').slideToggle(1000, 'swing');
    });

    .services-section {
    background-color: #E6E6E6;
    height: auto;
    }

    .services-section hr {
    border-bottom: hidden;
    width: 42px;
    margin-left: 0px;
    }

    .services-section .services-detail {
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    position: relative;
    top: 0px;
    padding: 60px 40px 60px 40px;
    margin-top: 32px;
    background-color:rgba(237, 238, 239, 0.8);
    height: 500px;
    }

    .services-section .services-detail:hover {
    box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
    top: -2px;
    background-color:#FAFAFA;
    color:#000;
    }

    .services-section .services-detail {
    font-size: 60px;
    color: #000;
    margin-bottom: 10px;
    }

    .services-section .services-detail:hover .fa {
    color: #fd2034;
     }

    .services-detail h5 {
    color: #000;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    }

    .services-detail:hover h5 {
    color: #000;
    }

    .services-detail p {
    color: #000;
    font-size: 18px;
    }

    .services-detail:hover p {
    color: #000;
    }

    .overlay{
    display: none; /* Hidden by default*/
    position: fixed; /* Stay in place*/
    z-index: 1; /* Sit on top */
    left: 0;
    bottom: 2%;
    width: 100%; /* Full width */
    height: 92%; /* Full height */
    border-radius: 10px;
    overflow: auto; /* Enable scroll if needed 
    background-color: rgb(217,217,217); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    background-color: rgb(255,255,255);
    -webkit-animation-name: slideIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
    }

    .overlay h3{
    color: black;
    text-align: left;
    margin-left: 15%;
    }

    .overlay p {
    font-size: 0.2em;
    color: black;
    float: left;
    width: 100%;
    }
    .overlay a {
    font-size: 0.8em;
    color: black;
    float:left;
    }
    .overlay-header {
    padding: 1px 16px;
    background-color: #fff;
    color: black;
    text-align: center;
    border-bottom: 2px solid #ffcc00;
    }
    .overlay img{
    width: 18%;
    float: right;
    margin: 1%;
    margin-right: -20%;
    }
    .des{
     margin: 15px;
    font-size: 1em;
    }

    .overlay:hover {
    box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
    background-color:#FAFAFA;
    color:#000;
    }



        
              
			  
				
				Blume
			   
             
                 
					
					Blume
					
					This is a test for blume.
				
                 
                     
                        
                         Blume
                     
                    
                         This is a test for blume.<
                     		
                     
                         
                         Tutorial

                    
                     
                         PDF-Doku

                    
                     
                         Image Download

                    
                     
                         Application Download

csrcastro · Accepted Answer

It's likely that this issue is caused by the use of position: fixed in your overlay element.

Position fixed elements geometry historically relates to the initial containing block (most often the viewport).

https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.

Why does an overlay not work in IE?

Answers (1)

Related Questions