I have created a custom PreLoader screen using animateTransform and keyframes on my svg image.
When I was working on the images they are working perfectly fine on all the browsers. But as soon as I've used them in my PreLoader they start working abruptly.
As you can check their behavior in Snippet below, it will work perfectly in Chrome but on Firefox and IE they are even visible at all.
//PreloadMe
$(window).on('load', function() { // makes sure the whole site is loaded
$('.la-anim-9').addClass('la-animate'); //to run the preloader lines animation
setTimeout(function() {
$('.preloader-logo img')
.fadeOut(400, function() {
$('.preloader-logo img').attr('src', 'http://gdurl.com/wzWh');
//to create the red logo effect
}).fadeIn(400);
}, 4500);
setTimeout(function() {
$('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website.
}, 6000);
setTimeout(function() {
$('body').css({
'overflow': 'visible'
});
//to revert back the normal scrolling
}, 6100);
});/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
/* change if the mask should have another color then white */
z-index: 99;
/* makes sure it stays on top */
}
.la-anim-9 {
position: fixed;
z-index: -1;
width: calc(100% - 100px);
height: calc(100% - 100px);
border: 0px solid rgba(0, 0, 0, 0.1);
pointer-events: none;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
margin: 0 auto;
right: 0;
}
.preloader-logo {
opacity: 0;
position: absolute;
left: 0;
right: 0;
width: 366px;
height: 133px;
top: 50%;
margin: 0 auto;
display: block;
transform: translateY(-50%);
z-index: 10;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.preloader-logo img {
max-width: 300px;
}
.la-anim-9.la-animate .preloader-logo {
opacity: 1;
}
.la-anim-9 .preloadline {
position: fixed;
background: #373737;
}
.la-anim-9 .preloadline-top,
.la-anim-9 .preloadline-bottom {
width: 0;
height: 2px;
}
.la-anim-9 .preloadline-left,
.la-anim-9 .preloadline-right {
width: 2px;
height: 0;
}
.la-anim-9 .preloadline-top {
top: 0;
left: 0;
}
.la-anim-9 .preloadline-right {
top: 0;
right: 0;
}
.la-anim-9 .preloadline-bottom {
right: 0;
bottom: 0;
}
.la-anim-9 .preloadline-left {
bottom: 0;
left: 0;
}
.la-anim-9.la-animate .preloadline-right {
height: 100%;
-webkit-transition: height 1.35s linear 0.3s;
transition: height 1.35s linear 0.3s;
}
.la-anim-9.la-animate .preloadline-bottom {
width: 100%;
-webkit-transition: width 1.35s linear 1.65s;
transition: width 1.35s linear 1.65s;
}
.la-anim-9.la-animate .preloadline-left {
height: 100%;
-webkit-transition: height 1.35s linear 3s;
transition: height 1.35s linear 3s;
}
.la-anim-9.la-animate .preloadline-top {
width: 100%;
-webkit-transition: width 1.35s linear 4.35s;
transition: width 1.35s linear 4.35s;
}
.la-anim-9.la-animate {
z-index: 100;
opacity: 0;
-webkit-transition: border 0.3s, opacity 0.3s 5.7s;
transition: border 0.3s, opacity 0.3s 5.7s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Preloader -->
<div id="preloader">
<div class="la-anim-9">
<div class="preloadline preloadline-top"></div>
<div class="preloadline preloadline-right"></div>
<div class="preloader-logo">
<img src="http://gdurl.com/5HVo" alt="Alt Text" />
</div>
<div class="preloadline preloadline-bottom"></div>
<div class="preloadline preloadline-left"></div>
</div>
</div>I have tried almost everything and digging up the SO as well Google for this but haven't found and decent solution that will work for both Firefox and IE.
The two problems you are facing are not the same.
For Firefox, this seems to be a resurgence of this bug which has been marked as "Resolved". When I tried your file without the CSS declaration, I could see it inside an <img> tag.
I didn't dig really deep in your markup to see if something else is causing it though.
The workaround here is to use an other element than <img> : <object>, <iframe> or <embed> should do.
For IE, it's simply that this browser doesn't support SMIL animations. You'll then have to use a javascript fallback library (such as FakeSmile), and include it inside your SVG document.
But here again, you'll have to leave <img> tag, since we can't execute scripts form this element. Any of the 3 above will do too.
So this would make you change your HTML markup to
<div class="preloader-logo">
<object data="http://gdurl.com/5HVo"></object>
</div>
and add one
<script xlink:href="pathTo/FakeSmile.js"></script>
inside your svg document, and you'll get support back for both IE and FF.