question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Page jump top after child page (overflow-x: scroll)

See original GitHub issue

Bug Report

Ionic version: [x] 4.x [x] iOS only

Current behavior: After back from child page and scroll any horizontal stack (div with overflow-x: scroll), ion-content jump to top.
The similar scrollTop() event i found after swipe child page quickly - from left to right. Possible to remove this scroll jump after back to parent page ?

Expected behavior: scrollTop value of ion-content persist the value and don’t reset to 0.

Example code: https://github.com/roman-rr/horizontal-stacks

Other information:

preview

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.803.5
   @angular-devkit/schematics    : 8.3.5
   @angular/cli                  : 8.3.5
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 17 other plugins)

Utility:

   cordova-res : 0.4.0 (update available: 0.8.0)
   native-run  : 0.2.4 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/romanrr/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Catalina
   Xcode             : Xcode 11.0 Build version 11A420a

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Oct 17, 2019

I can reproduce the issue in the Safari web browser too, so I don’t think it’s a problem with the webview plugin.

It looks like this issue is resolved in iOS 13.2, so I am going to close this issue as there is nothing actionable on our end. If the issue reappears in iOS 13.2+ please feel free to open a new issue, and we can re-evaluate. Thanks!

1reaction
thomasblomcommented, Oct 16, 2019

Hi @liamdebeasi, I have tried it with the repo @roman-rr has given. I get the same result, a scrollToTop behaviour after navigating back and sliding the carousel.

ionic-bug-scroll

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: Page jump top after child page (overflow-x: scroll) · Issue ...
Current behavior: After back from child page and scroll any horizontal stack (div with overflow-x: scroll), ion-content jump to top. The similar ...
Read more >
Setting overflow-y: hidden; causes the page to jump to the top ...
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it: var...
Read more >
Overflow Issues In CSS - Smashing Magazine
An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally.
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Read more >
How to prevent overflow scrolling in CSS - LogRocket Blog
Using this unit can sometimes cause problems when scrolling horizontally. This can happen if you add a width of 100vw to page content,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found