Почему моя анимация добавляет артефакты к моему счетчику в Moz Firefox?

Я хотел настроить красивый счетчик в 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

Gerard 17.11.2022 06:17

Я только что обновился до 107.0, и он все еще делает то же самое.

4D_Liam 17.11.2022 06:34

Здесь есть открытая ошибка в bugzilla — bugzilla.mozilla.org/show_bug.cgi?id=1671784

Miriam Zusin 17.11.2022 11:25
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Благодаря Мириам это исправлено! Я добавил border-radius: 0.01px; и overflow: hidden; в родительский класс .loader.

Другие вопросы по теме