Question

我已在此Shopify网站https://en.bentoandco.com/上实施了Algolia Autocomplete iframe，但我在移动版Safari上向下滚动时遇到了一些问题。基本上，如果向下滚动，窗口将返回原始位置。您需要缓慢滚动才能使其正常工作。以下是此问题的打印屏幕https://gyazo.com/286e034bb6a0e023d3ed408433c79ba4

有没有人遇到过这种行为，或者对它有潜在的解决方法？

这是Algolia iFrame及其内置属性

<iframe src="/298962/digital_wallets/dialog" scrolling="no" tabindex="-1" aria-hidden="true" style="position: fixed; top: 0px; left: 0px; z-index: 99999; height: 0px; width: 0px; border: 0px;"></iframe>

使用以下iframe的html和body属性

html, body {
  padding: 0;
  margin: 0;
}

我在我的iframe css上用

尝试了这个

html, body {
  padding: 0;
  margin: 0;

  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

我得到了这个结果https://gyazo.com/b8f6a8c3a0949b4651475d7977b049ea

如果它有帮助，这是我的移动搜索div

<div class="large--hide medium-down--show sticky-header search-is-open">
  <img src=" //cdn.shopify.com/s/files/1/0029/8962/t/26/assets/icon-mobile-search.svg?335812927906569276" 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 type="search" 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"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato, HelveticaNeue, &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: auto; text-transform: none;">bento</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>
</div>

和它的CSS

@media screen and (max-width: 768px) and (min-width: 300px)
.sticky-header.search-is-open {
    height: 100vh;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
    margin-right: 0;
    z-index: 9990;


@media screen and (max-width: 768px) and (min-width: 300px)
.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;
}

iOS Safari上的CSS滚动错误

0 个答案: