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.
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:
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.
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
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.
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?