Android Firefox 浏览器上的 CSS 动画抖动

Question

我在这个网站上有一个移动搜索div https://en.bentoandco.com/加载时会抖动。这是单击搜索图标时发生的情况 https://vimeo.com/270001160 .该问题仅特定于Android上的Firefox，即使我选择Android移动模拟器，我也无法在桌面版本上复制它。

这是我的元素

<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>

这是它的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: translate3d(0,0,0)可以解决问题。我猜是关于使用硬件加速的一些事情。