Error : Ignored attempt to cancel a touchstart event with cancelable=false

ionic-v1
1

I have two toggle buttons on a page, one enables Facebook for the user the other show displays a menu of option settings. When I click on the Menu’s ionic tab I first see this error:

Deferred long-running timer task(s) to improve scrolling smoothness. See 574343 - chromium - An open-source project to help move the web forward. - Monorail.

I have seen this error a lot and have not been able to eliminate it, however, it doesn’t seem to really be impacting anything.

But now I am seeing this second error, when I click on either of the two toggle buttons mentioned above I am now getting this error:

Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. ionic.bundle.js:5178

When this second error fires, my toggle functions don’t work properly. The Facebook login never occurs (though it did work before this error appeared) and the second one does display the hidden table, but then the <ion-checkbox> won’t work - it can’t be ‘checked’.

  <ion-toggle id="settings_FB" ng-model="fbItem.checked" ng-checked="fbItem.checked" ng-change="setFB()">
    Facebook Enabled:
  </ion-toggle>
  <ion-toggle id="settings_Bikes" ng-model="bikeItem.checked" ng-checked="bikeItem.checked" ng-change="showOptions(tem,'settings_Options');">
    Bike Settings
  </ion-toggle>
  <table id="settings_Options" style="margin-top:15px;margin-left:80px;display:none;font-size:10px;">
    <tbody >
    <tr>
      <td style="text-align:right;">Info A:</td>
      <td style="float:right;"><input id="bikesShub" style="border:1px black solid;background:LightGrey;width:20px;height:20px;" type="text" maxlength="1" ng-model="bikeItem.Shub" ng-change="bikes('Shub')" value="{{bikeItem.Shub}}"></input></td>
    </tr>
    <tr>
      <td style="text-align:right;">Def miles from END to nearest Dropoff Hub:</td>
      <td style="float:right;"><input id="bikesEhub" style="border:1px black solid;background:LightGrey;width:20px;height:20px;" type="text" maxlength="1" ng-model="bikeItem.Ehub" ng-change="bikes('Ehub')" value="{{bikeItem.Ehub}}"></input></td>
    </tr>
    <tr>
      <td style="text-align:right;">Show pickup hubs with no bikes available:</td>
      <td><ion-checkbox id="bikesAvail" style="border:0px;float:right;padding-left:24px;padding-top:5px" ng-model="bikeItem.Avail" ng-change="bikes('Avail')"></ion-checkbox></td>
    </tr>
    <tr>
      <td style="text-align:right;">Show dropoff hubs with no drop spots available:</td>
      <td><ion-checkbox id="bikesSpots" style="border:0px;float:right;padding-left:24px;padding-top:5px" ng-model="bikeItem.Spots" ng-change="bikes('Spots')"></ion-checkbox></td>
    </tr>
    </tbody>
  </table>

.controller JS:

  $scope.showOptions = function(item,name) {
    console.log(name + " : " +item.checked) ;
    if (item.checked == true) {
      $scope.bikeItem.checked = true ;
      document.getElementById(name).style.display = "" ;
    } else {
      $scope.bikeItem.checked = false ;
      document.getElementById(name).style.display = "none" ;
    }
  }
4 Likes
3

Hi There,
I was also facing the same.But when i removed onDragX > e.gesture.srcEvent.preventDefault(); line in ionic-bundle.js … the error got fixed.(But i don’t know the side effects :stuck_out_tongue: )
Thank you

2 Likes
4

lets try and get this in front of the Ionic team for assistance. I don’t like the idea of removing platform code - as you said, “don’t know the side effects”. I will link the new thread here in a moment

5

Created a new topic specific to your hack fix above…maybe quoting actual bundle code will catch their attention. Ionic-bundle.js - onDragX > e.gesture.srcEvent.preventDefault(); constantly throwing warnings/errors

1 Like
6

Great !! Hope they will check it out…

7

Also getting this error… any elegant solution other than deleting that line from the bundle?

8

I have the exact same error using Leaflet on Android.
It works perfectly in Browser though…

9

Same error for me BUT it happens ONLY on the first run of the app.
After a restart it’s working well without the error.
Happens both for Android & Ios.

Waiting to solution, hopefully the Ionic team will find something!!!

10

+1
im getting this when trying to drag around a leaflet map

ive added data-tap-disabled=“false” and set everything i can to dragabble=“false” and scroll=“false” incase its something else that is triggering on the same event, but this hasnt helped.

fair enough that there is work being done on ionic 2, but this is a rather major issue for older projects

happens on all runs of the app for me

11

I’m also getting this error, very annoying. My app is rendered useless right now as I cannot scroll.

12

+1 I’m seeing this issue still on first run of the application. If I restart it starts to work fine again. Is there going to be any resolution to this?

13

@Slavrix Hi, I have the same problem with openlayers, did you solved the problem?

14

@JiaoXiangNing not yet i havnt

15

In my case it’s the ion-range that’s not working properly - it changes its ngModel value, calls its ionChange function/method and all that, but the view does not update unless I push one of the buttons in it. It’s also throwing that same error (“ignored attempt to cancel…”).

16

Too late to the party.

I also faced such issue and that is be cause the content is scrollable (draggable) by default. If you don’t require that, you can specify just,

drag-content=“false”

on ion-content. Like this,

<ion-content padding drag-content="false">

which disables content scrolling (may be web view scrolling internally).

And, ion-toggle starts responding :wink:

1 Like
17

Nope. I added that and I am still getting the same error message. Oddly, I always get it when tapping a button of some sort.

18

This worked for me. Thanks!