Bad performance when changing from portrait to landscape

Since some days I've been creating a web page and now I'm facing some issues.

I was doing some tests in order to verify the behaviour on mobile, I noticed that my page were having this strange behaviour when changing from portrait to landscape, It takes around 5 seconds to the page to be displayed properly and this is supposed to happen without delays to provide a good UX.

Also, I just noticed that my menu were having a weird behaviour as well, after pressing the hamburger icon it took around 2-3 seconds for the menu to be displayed.

After doing some tests I think I found issue, I have this css code that adds the social media icons.

HTML:

<div class="social-media-container">
    <div class="social mail"></div>
    <div class="social instagram"></div>
    <div class="social facebook"></div>
    <div class="social youtube"></div>
    <div class="social twitter"></div>
    <div class="social pinterest"></div>
</div>

CSS:

.social-media-container{
 width: 300px;
 margin: 0 auto 0;
 overflow: hidden;
}
.social{
    float: left;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.mail{
    background-image: url('../images/email.png');   
}
.instagram{
    background-image: url('../images/instagram.png');   
}
.facebook{
    background-image: url('../images/facebook.png');    
}
.youtube{
    background-image: url('../images/youtube.png'); 
}
.twitter{
    background-image: url('../images/twitter.png'); 
}
.pinterest{
    background-image: url('../images/pinterest.png');   
}

After removing this css from my code the page started to work perfectly, I don't see why this should be affecting my menu and delaying the page when changing to landscape mode.

Note: I'm using viewport meta tag.

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">

I will appreciate any helpful answer.