1
Ein Spinner möchte ich auf meiner Website verwenden sieht schlecht auf Firefox (48.0.2).Firefox Css Spinner Animation Rendering Problem
Comparison between Firefox and Chrome (imgur)
See the spinner live (Third Spinner)
Gibt es eine Lösung für dieses Rendering-Problem?
Die Verlangsamung der Animation hat nicht geholfen, also wende ich mich an euch (: D) und ich glaube nicht, dass es noch einen Fix für diesen Stackoverflow gibt.
Hier Code der problematischen Spinner demonstriert:
body {
background: #0dc5c1;
}
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}<div class="loader">Loading...</div>Getestet auf Firefox, Chrome, Kanten- und IE (11). Nur Firefox hat Probleme.
Ich denke, die einzige praktikable Lösung, die ein Bild zu verwenden, und drehen Sie es von Formen, CSS ist, anstatt sich auf den Browser-Rendering wäre aber auch, dass seine eigene mögliche Probleme hat. – Quantastical
@Quantastical das ist zumindest für den Moment eine ziemlich gute Idee. Ich war zu sehr darauf fixiert, dass es css/html shape ist, dass es für mich nicht ein Bild ist. Vielen Dank! –