Я внедрил iframe Algolia Autocomplete на этом сайте Shopify https://en.bentoandco.com/, но у меня возникли некоторые проблемы с прокруткой вниз на мобильном 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>
со следующими html и свойствами тела для iframe
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 для мобильного поиска
<code><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, "Helvetica Neue", 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
Поиск
и 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;
}