[Resolved] Tab pages freeze wehn scrolling vertically

Ionic Framework ionic-v3
1

Hi,

I’m encountering a bug; when I move to a page which scrolls vertically on a device from a page which also scrolls then move back to the previous page the previous page is frozen and I cannot scroll down/up.

This bug does not happen if I move from a page will scroll to a page without it.

I’m using ion-content and 2.0.0-beta.10.

Thanks for any help!

2

@ApetitoDevops

try to use
<ion-content overflow-scroll="true">

3

Cheers for the response but that didn’t fix it.

Not sure if it makes any difference but I’m using the Ionic tabs template for my app.

4

could you share your tabs code ?

5

Sure

So the tabs page is from the template with a few extra tabs

image
1.png692×142 18.7 KB

In the .ts I’m importing the pages and setting them as roots, public tab1Root: any; followed by this.tab1Root = HomePage; in the constructor.

The actual pages are:
image

I have tried to replace the content with just p tags to make sure that the content itself wasn’t causing the issue, however the bug still occurred so the content seems to be fine.

6

add below style in your style.css if this could help

.scroll{
height: 100% !important;
}

7

Sadly that didn’t solve the issue either and there is nothing in my css which would override either the height nor scroll ability.

Any other suggestions? :slight_smile:

8

After more testing it seems that this bug only occurs on iOS and not Android.

Further to this, if you open a modal (not sure about other actions) on that page and close it the page fixes itself.

9

Found a solution here: Ionic2 Beta10 - Tab with Scroll content - Scroll not working in iOS

Seems to be a bug related to beta 10

10

This is actually a big problem for hybrid and cross-platform development.
On iPhone Safiri, it happens. I tried chrome on ios devices, it happened too. Maybe Chrome on ios is also safari browser core.
Although my solution will cause losing the bouncing effect, you can try it.
ionic Content component has a method called ‘enableJsScroll’, which will disable the native scroll of safari.

mypage.component.ts

import {OnInit} from '@angular/core'
import {Platform,Content} from 'ionic-angluar'
export class MyPage implements OnInit{
    @ViewChild(Content) content: Content
    ngOnInit() {
	if (this.platform.is('mobileweb') && this.platform.is('ios')) {
		this.content.enableJsScroll()
	}
    }
    constructor(private platform:Platform){}
}

mypage.pug

ion-header
  ion-title Title
ion-content
  p this is a long paragraph to scroll
11

Hello,

Thank you @kaldr! It seems to be a workaround with an acceptable scroll.

However I see two regressions in long scroll page:

  • On iOS9 WebApp: elements appear jerkily.
  • Much more serious: using next button on keyboard several times brokes the page. I can’t go to the top of the page and the bottom of the page is no longer at the bottom of the screen.

Have you got these problems?

TIA.

Antoine F

12

Sir are u fixed the scrolling issue, sir actually in my case content is not scrolled only in the iphone7 device and in the another iphone its working do know how to fix sir?