Dragging Down Triggers Page Refresh

[dionsthilaire]

Describe the bug
Building an Angular application and testing on an Android phone, dragging down on the pane causes the page to refresh.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://angular-qxxvuj.stackblitz.io/
2. Attempt to swipe down pane
3. Observe refresh behavior

Expected behavior
Dragging down on the pane should not refresh the page

Smartphone (please complete the following information):

• Device: Pixel 3XL
• OS: [Android 10 Build/QQ3A.200605.001]
• Browser [Chrome]
• Version [83.0.4103.106]

Additional context
Angular 9 + Material as provided in this editable stackblitz
https://stackblitz.com/edit/angular-qxxvuj

[roman-rr]

@dionsthilaire Thank you for issue.
Please record a video with bug demonstration.

[dionsthilaire]

[roman-rr]

@dionsthilaire Are you able to reproduce with other android device ?
Issue with real device or chrome emulation mode on desktop ?
WebView + Chrome both ?

[dionsthilaire]

I haven’t tried in an emulator and only have this one device. The recording I sent was of a remote debugging session on that physical device.

[roman-rr]

@dionsthilaire
I'm unable to reproduce video.zip

Device: Pixel 3XL
Chrome: 83.0.4103.44
Android API 30 (> 10)

Moreover, i did try all examples from README.md and all are works.

I do recommend for you check all examples listed in readme and try buttons, check if some specific pane function give exception in combination of your phone settings/chrome/functions or just drag gesture. Also try different browser and update chrome OS to latest.

[dionsthilaire]

Actually, the stack blitz editor frame is preventing the refresh. Please try viewing the page url directly without the editor.

https://angular-qxxvuj.stackblitz.io

[roman-rr]

@dionsthilaire

Seems that somethings with stackblitz.
Please try:

1. https://output.jsbin.com/dizerihuwo
2. Try stackblitz without @angular/material

[roman-rr]

@dionsthilaire
The issue is in chrome mobile pull-to-refresh functionality. Solution

a) Fix with css

body {
  overscroll-behavior-y: none;
}

b) Set touch-action: none to content except pane, on drag events.
c) Applying overflow-y: hidden to the body element always or while drag events.
d) Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect.

Note: for mobile frameworks such as ionic issue fixed out of the box.

[dionsthilaire]

Yes, I do agree it works with Ionic and not with Angular.

Note: There is nothing special about the content, just basic input and enough content to trigger overflow behavior.

Attached is the source for a vanilla Angular CLI application without Material

1. ng new cupertino-angular-demo-nomaterial
2. cd new cupertino-angular-demo-nomaterial
3. npm install --save cupertino-pane
4. update src/app.component.html

<div class="cupertino-pane">
  <h1>Header</h1>
  <div class="content" overflow-y>
    <p>
      some really long text...
    </p>    
  </div>
</div>
<router-outlet></router-outlet>

5. update src/app.component.ts

import { Component } from "@angular/core";
import { CupertinoPane, CupertinoSettings } from "cupertino-pane";
import { PaneBreaks } from "cupertino-pane/dist/models";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "cupertino-angular-demo-nomaterial";
  private bottomDrawer: CupertinoPane;

  ngOnInit() {
    this.bottomDrawer = new CupertinoPane(".cupertino-pane", {});
    this.bottomDrawer.present({ animate: true });
  }
}

6. serve (ng serve) or build for deployment (ng build --prod)

To simplify this i've also zipped up the solution (without node modules)
cupertino-demo-nomaterial.zip

1. Unzip this then just run npm install in the extracted folder.

To remove stack-blitz from the equation I created a host for the application in Azure: https://cupertinodemo.z13.web.core.windows.net/

Same issue.

[dionsthilaire]

@dionsthilaire
The issue is in chrome mobile pull-to-refresh functionality. Solution

a) Fix with css

body {
  overscroll-behavior-y: none;
}

b) Set touch-action: none to content except pane, on drag events.
c) Applying overflow-y: hidden to the body element always or while drag events.
d) Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect.

Note: for mobile frameworks such as ionic issue fixed out of the box.

yes, actually this is what we used as a work-around to fix the issue. Just thought you would like to know that this bug existed :)

Ionic is an awesome framework, but so is Angular, also very popular 👍