Android Firefox移动端搜索CSS动画抖动问题求助

The Problem #

I'm dealing with a frustrating rendering bug that only pops up on Android Firefox: when users tap the mobile search icon, the dropdown panel jitters noticeably as it loads. Oddly enough, this doesn't happen on desktop Firefox, other mobile browsers, or even Android emulators—making it tricky to debug. You can observe the jittery behavior as the search panel animates into view.

Relevant Code #

Here's the HTML for the mobile search components:

<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;"></pre>
          </div>
          <div class="search-input-submit">
            <span class="input-group-btn banner">
              <button type="submit" id="mobile-submit-button" class="btn icon-fallback-text banner js-search-submit">
                <span id="mobile-submit-button-text">Search</span>
              </button>
            </span>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

And the corresponding 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; 
}

Troubleshooting & Fix Ideas #

Based on Android Firefox's known rendering quirks and your code, here are targeted fixes to test one by one:

• Fix 100vh Calculation Issues
  Android Firefox often miscalculates 100vh when the browser's address bar expands or collapses, leading to height jumps. Replace 100vh with dynamic viewport height (dvh)—it accounts for address bar changes automatically:

  .sticky-header.search-is-open {
    height: 100dvh; /* Replaces 100vh */
  }
  

  If dvh isn't compatible with older Firefox versions, use JavaScript to set the height based on the actual viewport:

  function updateHeaderHeight() {
    const header = document.querySelector('.sticky-header.search-is-open');
    if (header) header.style.height = `${window.innerHeight}px`;
  }
  window.addEventListener('load', updateHeaderHeight);
  window.addEventListener('resize', updateHeaderHeight);
  

• Optimize Flex Container Rendering
  Firefox mobile can jitter when rendering flex containers with animations. Add hardware acceleration hints and standardize animation properties to smooth things out:

  .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;
    animation-duration: 0.3s; /* Add standard animation property */
    will-change: transform; /* Tell browser to pre-optimize this element */
    transform: translateZ(0); /* Trigger hardware acceleration */
  }
  

• Limit Layout Repaints
  The combination of overflow: hidden on the header and the search dropdown's animation might trigger unnecessary repaints. Use contain to restrict layout changes to the header element:

  .sticky-header.search-is-open {
    height: 100dvh;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
    margin-right: 0;
    z-index: 9990;
    contain: layout paint; /* Restrict repaint to this element only */
  }
  

• Neutralize the Hidden <pre> Element
  The hidden <pre> element next to the search input might be causing unexpected layout shifts, even with aria-hidden="true". Move it completely off-screen to eliminate any impact:

  .search-input-field pre[aria-hidden="true"] {
    position: fixed;
    left: -9999px;
    top: auto;
  }
  

Start with the dvh fix first—it's the most common culprit for Android Firefox viewport-related jitters. Test each change individually to isolate what resolves the issue for your specific setup.

内容的提问来源于stack exchange，提问作者bento22