ionic-framework: Ionic 2 scroll freezes in iOS Safari.

Ionic version: (check one with “x”) [ ] 1.x [X] 2.x & the recent RC versions

I’m submitting a … (check one with “x”) [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Scroll freezes in iOS wkWebView and Safari. See video here… https://youtu.be/OtSY6v9ftKU

Expected behavior: Scroll shouldn’t freeze

Steps to reproduce: I can recreate this issue on any ion-content view on iOS 10 in platform browser or ios. What you can do is once you have enough content to scroll vertically, you can scroll the content to the bottom of the view, tap once on the bottom of the screen, then start scrolling like crazy. It immediately goes into an unresponsive frozen like state. This is a little hard to reproduce and its gotten better with releases. But its still there. It also seems to happen more when going out of safari and coming back in then immediately scrolling.

Related code:

All ion-content views with scrolling

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 Ionic Framework Version: 2.0.1 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: 1.9.0 ios-sim version: 5.0.12 OS: macOS Sierra Node Version: v7.3.0 Xcode version: Xcode 7.3.1 Build version 7D1014

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

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

kaldr on Jun 28, 2017

@markholland I also encounter similar issues on iOS safari，how to resolve the issue?

tomwey on Jun 7, 2017

@jgw96 I think this problem happen because the body use the style position: fixed, and I don’t know why ionic choose to use fixed rather than the absolute. @teknekale @jodybrewster you can try, it becomes better after I replace it with the absolute. btw, when reaching the bottom, you must wait till the page bounce back and then continue scroll the content.

ivanwonder on Apr 7, 2017