Я пытаюсь загрузить простой внешний файл .css и показать анимацию загрузки с изображением в центре страницы.Он отлично работает, за исключением Firefox (обычно проблемы возникают в IE) ...
При открытии страницы в Chrome / IE изображение загружается и анимация запускается - все хорошо.В Firefox я получаю пустой белый экран.Как только я нажимаю F5, появляется изображение и рамка вокруг изображения, но оно не анимируется.Если я нажму F5 в другой раз, анимация границы начнется.
На вкладке сети Dev-Tool (F12) я вижу, что таблица стилей была загружена правильно.Это похоже на то, что классы внутри таблицы стилей просто не применяются к элементам ... Такое поведение происходит каждый раз, когда страница загружается, поэтому я думаю, что это, скорее всего, не какая-то странная кеширующая "ошибка".Страница размещена на IIS 10.
Честно говоря, я понятия не имел, с чего начать, так как пример Codesandbox (в нижней части моего поста) прекрасно работает в Firefox.У меня никогда не было опыта, когда мне приходилось нажимать F5 дважды, чтобы анимация работала в любом браузере.
Я знаю, что это, вероятно, слишком конкретный вопрос, но, возможно, у кого-то есть идея, с чего начать поиск?Любая помощь / идеи будут высоко оценены
.loader-progress {
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.8);
top: -25px;
left: -25px;
position: absolute;
width: 120px;
height: 120px;
background-color: white;
opacity: 0.8;
transform: rotate(45deg);
border-top: 5px solid rgba(36, 181, 299, 0.8);
animation: loader-spin 2s linear infinite;
-moz-animation: loader-spin 2s linear infinite;
-webkit-animation: loader-spin 2s linear infinite;
}
.wob-progress {
background: url(https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) no-repeat center center;
background-size: 80px 80px;
width: 80px;
height: 80px;
position: absolute;
}
@keyframes loader-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://10.33.8.18/asw/styles/preloader.css"></head>
<body>
<div id="loader" style="position:absolute;top:calc(50% - 40px);left:calc(50% - 40px);z-index:9999">
<div id="loader-progress" class="loader-progress"></div>
<div class="wob-progress"></div>
</div>
</body>
</html>
Codesandbox: https://codesandbox.io/s/326nq3021m