1
Spinner, который я хочу использовать на своем сайте, выглядит bad на Firefox (48.0.2).Firefox css spinner animation rendering issue
Comparison between Firefox and Chrome (imgur)
See the spinner live (Третья вертушка)
Есть ли исправить эту проблему рендеринга?
Замедление анимации вниз не помогло, поэтому я обращаюсь к вам, ребята (: D), и я не думаю, что есть исправление для этого еще в stackoverflow.
Вот код демонстрирует проблематичный кок:
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>Испытан на Firefox, Chrome, IE и Край (11). Только у Firefox есть проблемы.
Я считаю, что единственным жизнеспособным решением было бы использовать изображение и вращать его вместо того, чтобы полагаться на CSS рендеринга браузера форм, но даже имеет свои собственные потенциальные проблемы. – Quantastical
@Quantastical это довольно хорошая идея, по крайней мере, на данный момент. Я был слишком зациклен на том, что это css/html shape, что это изображение не было для меня. Благодаря! –