Я хотел настроить красивый счетчик в CSS для индикации загрузки, и он хорошо работает и отлично выглядит во всем, кроме Mozilla. Может ли кто-нибудь объяснить мне, почему, и как это исправить? Или хотя бы указать мне правильное направление.
<style>
.loader {
display: inline-flex;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
outline: none;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 0.15em solid;
animation: prixClipFix 1.8s linear infinite;
}
:is(h1, h2, h3, h4, h5) .loader::before {
border-width: 0.1em;
}
@keyframes rotate {
100% {
transform: rotate(360deg)
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
100% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
}
</style>
<div>
<!-- <div class = "spin"></div> -->
<h1>Loading
<div class = "loader"></div>
</h1>
<h2>Loading
<div class = "loader"></div>
</h2>
<h3>Loading
<div class = "loader"></div>
</h3>
<h4>Loading
<div class = "loader"></div>
</h4>
<h5>Loading
<div class = "loader"></div>
</h5>
Loading
<div class = "loader"></div>
</div>
Изучив это, я обнаружил, что FF не ценит вращение div, когда полигон растет и сжимается. Отключение любого из них решает проблему, однако я хотел бы, чтобы это было сделано для обоих.
Я только что обновился до 107.0, и он все еще делает то же самое.
Здесь есть открытая ошибка в bugzilla — bugzilla.mozilla.org/show_bug.cgi?id=1671784
Благодаря Мириам это исправлено! Я добавил border-radius: 0.01px;
и overflow: hidden;
в родительский класс .loader
.
Отлично работает в ФФ версии 107.0