Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: ion-content allows over scroll when a fixed input has focus. #18007

Closed
marpstar opened this issue Apr 9, 2019 · 1 comment

Comments

3 participants
@marpstar
Copy link
Contributor

commented Apr 9, 2019

Bug Report

Ionic version:

[x] 4.x

Current behavior:

I've got a modal page that contains the following template:

<ion-header>
  <ion-toolbar>
    <ion-title>modal</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar slot="fixed" #search></ion-searchbar>
  <ion-virtual-scroll [items]="items" >
    <ion-item *virtualItem="let item">
      {{ item._id }}
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

Note that my ion-searchbar has slot="fixed".

My virtual scroll has enough items to allow scrolling of ion-content.

  1. Focus on the searchbar input.
  2. Scroll the list to the bottom.
  3. When you reach the bottom, the list continues to scroll until almost all items are completely obscured from view.

With a sufficiently tall ion-header, you can get into a state where ALL items are hidden.

This issue occurs only on a real device, as it's the height of the on-screen keyboard that dictates the size of the resulting padding-bottom on ion-content.

Expected behavior:

I expect to only be allows to scroll until the last item of the list is at the bottom of the view port, not the top.

Related code & Reproduction Steps:

I've built a sample project that displays this behavior: https://github.com/marpstar/ionic-issue-overscroll

  1. Clone repo, npm install and ionic cordova run <platform>
  2. Tap the "Click Me" button, this will launch a modal with ModalPage.
  3. The ModalPage is an Ionic Page with a fixed ion-searchbar at the top and a ion-virtual-scroll beneath it.
  4. Put your cursor in the ion-search-bar and scroll the content area.
  5. As you hit the bottom of the list, notice that the list continues to scroll and leaves a large padding at the bottom of ion-content. In some cases all items may be obscured from view.

Other information:

Inside of @ionic/core's src/utils/input-shims/hacks/scroll-padding.ts the code detects focus to input and adds padding (equal to the height of the on-screen keyboard) to ion-content accordingly.

Theoretically, Giving focus to an input inside of a "fixed" container should not result in any need for adjusting the scroll.

Ionic info:


Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/codysand/.nvm/versions/node/v10.13.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.0.2 (/Users/marpstar/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.13.0 (/Users/codysand/.nvm/versions/node/v10.13.0/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.2 Build version 10E125

@ionitron-bot ionitron-bot bot added the triage label Apr 9, 2019

marpstar pushed a commit to marpstar/ionic that referenced this issue Apr 9, 2019

@ionitron-bot ionitron-bot bot removed the triage label Apr 10, 2019

@Bengejd

This comment has been minimized.

Copy link

commented Apr 15, 2019

Also experiencing this issue even with --overflow: hidden; applied to the ion-content. It's quite annoying.

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation May 15, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to In progress 🤺 in Ionic Core May 15, 2019

@liamdebeasi liamdebeasi moved this from In progress 🤺 to Needs review 🤔 in Ionic Core May 20, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 May 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.