Question

我尝试加载一个简单的外部.css文件，并在页面中心显示带有图像的加载动画。除了Firefox（通常是IE出现问题...）以外，它的运行效果都很好。

在Chrome / IE中打开页面时，会加载图像并开始播放动画-一切都很好。在Firefox中，我得到了空白的空白屏幕。一旦我按F5，就会出现图像和图像周围的边框，但它没有动画。如果我再按一次F5，边框动画就会开始。

在“开发工具（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

无法在Firefox中加载/应用外部CSS

0 个答案: