Проблема, связанная с небольшим мобильным экраном и событием щелчка, переходящим в верхнюю часть страницы. - PullRequest
Новая
       15

Проблема, связанная с небольшим мобильным экраном и событием щелчка, переходящим в верхнюю часть страницы.

0 голосов
/ 10 марта 2020

Я проверил это на моем iPhone 8+, и проблема отсутствует. Также это не происходит ни на одном компьютере, на котором я его тестировал.

Но когда я использую iPhone 6 iOS 12.4 в chrome или в сафари, когда я нажимаю на кнопку или div с angular (клик) он прыгает на самый верх. Я не могу повторить это с помощью инструментов разработчика в браузере.

Нет, я не использую теги. Все примеры, которые я видел, касаются # в теге a.

html для одного из элементов выглядит следующим образом: 

<i
     nz-icon
     nzType="heart"
     [nzTheme]="
     postService.userLikesPost.value ? 'fill' : 'outline' "
     (click)="likeOrUnlikePost()"
      ></i>

У меня такое ощущение, что это связано с размером экрана, но все удается нормально уместить на странице , Там нет боковой прокрутки или что-то еще, и все, что делает кнопка, это отправить что-то в API. Еще один (щелчок) у меня переключение вниз, но это также отправляет пользователя наверх. Другой находится в div, который расширяется и снова отправляет пользователя наверх.

Есть идеи, что может быть причиной этого? Опять же, нет никаких проблем с iphone 8+, только меньшим 6. Мне удалось открыть симуляторы xcode, но все сводится только к iphone8, и с этим проблем не было.

Я также использую ngx-infinite-scroll, но я не верю, что это вызывает проблему, потому что это может произойти на обоих устройствах.

Редактировать: Обнаружено, что телефон был iphone 6 на ios 12. Он отлично работает на XR и iphone 8, 8+ и Nexus

Edit 2: я настроил свои симуляторы xcode для использования ios12.4 и это кажется проблемой. Как это работает на ios 13 iphone 7, но не на iphone 7 ios 12.4 ... Может ли это быть проблема angular 8 и ios 12.4? Я собираюсь попытаться игнорировать поведение событий по умолчанию и посмотреть, работает ли это.

Редактировать 3: Я сузил проблему. Контейнер прокрутки был внутри розетки маршрутизатора. Таким образом, внешний html выглядит следующим образом. 

<div class="main-container">
  <app-ui-navigation-header class="top-banner"></app-ui-navigation- 
  header>
   <div class="navigation-container" #navigationContainer>
     <div class="router">
        <router-outlet></router-outlet>
     </div>
     <div class="bottom-container">
        <app-ui-bottom-banner></app-ui-bottom-banner>
     </div>
  </div>
</div>

Для css у меня было 

.main-container {
  background-color: $off-white;
  display: grid;
  grid-template-rows: .15fr 1fr;
  height: 100%;
 }

.navigation-container {
  grid-row: 2 / 3;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

Но затем я перемещаю overflow-y: auto и прокрутку переполнения в основной контейнер вот так: 

.main-container {
  background-color: $off-white;
  display: grid;
  grid-template-rows: .15fr 1fr;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

и работает просто отлично. Я хотел бы сохранить заголовок и иметь .navigation-container для прокрутки. Но я делаю успехи.

1 Ответ

0 голосов
/ 30 апреля 2020

У меня была похожая проблема при нажатии кнопки в iFrame на iOS 12.4 и я нашел решение, которое сработало для меня. Каждый раз, когда я нажимал на кнопку ввода, экран прокручивался вверх. Как только я поместил высоту, переполнение и прокрутку для тегов html и body, это было исправлено. Это происходит со всеми iOS 12.4 iPhone iOS при работе через мой симулятор xCode. 

html, body {
  height: 100%;
}
html {
  overflow: hidden;
}
body {
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
...