CSS Animation Judder в браузере Android Firefox

Question

У меня есть мобильный поисковый дивизион на этом сайте https://en.bentoandco.com/, который определяет нагрузку. Это то, что происходит при нажатии на значок поиска https://vimeo.com/270001160. Эта проблема относится только к Firefox на Android, я не могу воспроизвести его на настольной версии, даже если я выбираю мобильный эмулятор Android.

Это моя стихия

<code>  <img src=" //cdn.shopify.com/s/files/1/0029/8962/t/26/assets/icon-mobile-search.svg?8955747899599855085" class="js-mobile-search-open" id="mobile-search-icon" alt="Mobile search icon">

<div class="search-dropdown-mobile js-mobile-search-dropdown mobile-search-active">
  <span class="icon icon-x js-mobile-search-exit" id="mobile-search-exit" aria-hidden="true"></span>
  <div class="wrapper search-content">
    <form class="medium-down--show input-group search-bar" action="/search" method="get" role="search">
      <div class="one-whole search-grid-wrapper">
        <div id="mobile-search-flex" class="one-whole">
          <div class="search-input-field">
            <input id="searchInputMobile" name="q" value="" placeholder="Enter Search Terms..." class="input-group-field banner js-search-query aa-input" aria-label="Enter Search Terms..." autocomplete="off" spellcheck="false" dir="auto" type="search"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Lato&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 500; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;">

Поиск

и это CSS для него

.sticky-header.search-is-open {
    height: 100vh;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
    margin-right: 0;
    z-index: 9990;
}
.sticky-header {
    top: 0;
    right: 0;
    width: 100%;

.sticky-header .search-dropdown-mobile.mobile-search-active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    background: #ececeb;
    top: 0;
    -webkit-animation-duration: 0.3s;
}

У кого-нибудь есть идеи, как решить эту проблему? Заранее спасибо.

Answer 1

В прошлом у меня были похожие проблемы с элементами - обычно из-за использования CSS-преобразований.Однако, чаще всего, использование свойства CSS transform transform: translate3d(0,0,0) решает проблему.Я думаю, что-то об использовании аппаратного ускорения.