Encountering an issue with what I thought was a simple preloader. It seems to be functioning properly everywhere except for Chrome on iPhone5. The preloader appears but never fades out. Any assistance would be greatly appreciated.
HTML:
<div id="preloader">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
CSS
#preloader {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
z-index: 999;
background: red;
border: solid 3000px white;
}
.item {
width: 30px;
height: 30px;
position: absolute;
border-radius: 2px;
}
(plus some keyframes not included here)
Script:
$(window).on('load', function() {
$('#preloader').delay(250).fadeOut();
})
Codepen: https://codepen.io/anon/pen/MBJGMM