bug: Deprecated warning on Chrome

[5amfung]

Type: bug

Platform: desktop browser

Occasionally I see this warning on Chrome Version 45.0.2454.46 beta (64-bit) running on OSX 10.10.4.

'Touch.webkitRadiusX' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusX' instead. ionic.bundle.js:1162

[kreck]

+1

Additionally i see: SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead. ionic.bundle.js:12005

[gigocabrera]

+1

[quedicesebas]

That is now in chrome

[adamjaffeback]

This completely disables to propagation of click events on Google Maps when developing in the browser, using the app on a physical Android device, and iOS emulator. In short, it completely breaks my app.

[mhartington]

Do you have an example of where I can see this? The SMIL animations we know about, but the webkitRadius is new to me.

[adamjaffeback]

Interestingly, the app works expectedly in Safari. It is working correctly in a coworker's Chrome.

For me, it works in Chrome, but only when I'm not emulating a device. Flow in video below (for some reason the GIF conversion really slowed stuff down):

• ionic serve (Chrome), app opens with console but no device emulation.
• Marker is clickable. Refresh screen.
• Click different marker. Clickable.
• Start emulating iPhone 6 using Dev Tools.
• Refresh page. Click marker, not clickable.
• Click second marker, not clickable
• Emulate Android. Refresh. Marker still not clickable.

[mhartington]

Is this happening when on an actual device?

[adamjaffeback]

Yes, on Android. Haven't tested on iOS device yet. Works fine in Xcode. Standby though, I'm searching through commits to rule out my user error (probable).

[mhartington]

Can you provide a minimal example that demos the problem

[adamjaffeback]

Found the issue rolling back through commits. This started when I included angular-material to add some styling. Found the soluton in their issues:

app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

Thanks for your attentiveness @mhartington! You're a class-act!

[mhartington]

Thanks for the nice words :grin:

So just to be clear, your issue was with angular material? Not with ionic?

[gigocabrera]

I don't use angular material. I only use ionic. Let me prepare an example that you can look at

[gigocabrera]

Tested in Chrome with Developer Tools 1) https://brilliant-inferno-1044.firebaseapp.com/ 2) Login using gigo@test.com / 123 3) You will land on the Accounts screen, tap on the white area On the console, you will see the warning:

SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead. ionic.bundle.js:1162 'Touch.webkitRadiusX' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusX' instead. ionic.bundle.js:1162 'Touch.webkitRadiusY' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusY' instead. ionic.bundle.js:1162 'Touch.webkitRotationAngle' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.rotationAngle' instead. ionic.bundle.js:1162 'Touch.webkitForce' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.force' instead.

[actias]

I can confirm we just started getting this about 2-3 days ago for some reason. The app seems to be working fine but the error came out of nowhere. We hadn't updated the framework or anything.

[mhartington]

Alright, so we can confirm this issue. Thanks for letting us know all.

[ghost]

Hi,

it seems you can have this warning with the sidemenu starter template, when you open the side menu the first time in chrome desktop (I haven't tried on a mobile device). Chrome was recently updated, I guess that's one of the changes, adding a deprecation warning.

ionic.bundle.js:1162 'Touch.webkitRadiusX' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusX' instead.
ionic.bundle.js:1162 'Touch.webkitRadiusY' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusY' instead.
ionic.bundle.js:1162 'Touch.webkitRotationAngle' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.rotationAngle' instead.
ionic.bundle.js:1162 'Touch.webkitForce' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.force' instead.

EDIT: I have seen other warnings in other circumstances, but I don't remember which ones. I guess the set of deprecated webkit properties is much larger, and this is just an easy-to-find sample.

EDIT 2: I reread the above messages, and I remember one of the other messages I got in my app was: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

EDIT 3: I also got the following:

ionic.bundle.js:1162 'webkitMovementX' is deprecated. Please use 'movementX' instead.
ionic.bundle.js:1162 'webkitMovementY' is deprecated. Please use 'movementY' instead.

And this one, but maybe unrelated to this topic:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

[atans2468]

I am getting this same issue and out of no where. My log is reading:

ionic.bundle.js:12005 SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

and then:

ionic.bundle.js:21157 Error: permission_denied: Client doesn't have permission to access the desired data. at Error (native) at b.G (http://localhost:8100/js/firebase-web.js:121:36) at Object.G (http://localhost:8100/js/firebase-web.js:202:386) at http://localhost:8100/js/firebase-web.js:187:502 at Ch.g.Id (http://localhost:8100/js/firebase-web.js:192:104) at qh.Id (http://localhost:8100/js/firebase-web.js:183:364) at ih.qh.Fa.Bh.t as xg at lh (http://localhost:8100/js/firebase-web.js:175:464) at WebSocket.ih.open.b.ua.onmessage (http://localhost:8100/js/firebase-web.js:174:245)(anonymous function) @ ionic.bundle.js:21157 FirebaseArray.$$error @ angularfire.js:414 (anonymous function) @ angularfire.js:701 (anonymous function) @ angularfire.js:1897 parent.$get.Scope.$eval @ ionic.bundle.js:24673 parent.$get.Scope.$digest @ ionic.bundle.js:24484 (anonymous function) @ ionic.bundle.js:24712 completeOutstandingRequest @ ionic.bundle.js:14221 (anonymous function) @ ionic.bundle.js:14493

I am going through and checking to confirm that this isn't a user error, however, I haven't changed anything with firebase-web.js nor have I touched ionic.bundle.js in any way

[mhartington]

Yes, we can confirm this too. No need to provide more info, we know where the issue is. Will get to this.

[mike-nelson]

We are seeing this issue too and keen to get the fix as soon as its available. (Seems like an unfair derecation warning, not giving people much time!)

Thanks

[vko-online]

Ionic should tight with Modernizr imho

[mhartington]

@vko-online Modernizr would really be a good fit here. Not really needed.

[vko-online]

@mhartington Agree. Anyway those warnings make no sense in mobile browsers, as they are older than desktop versions imo.

[mhartington]

Well, they make sense on android, since 5.0 updates the system webview separately from the OS. So that webview will be the same as desktop chrome

[vko-online]

Touch.webkitForce is deprecated where can i find this usage in code? https://github.com/driftyco/ionic/search?q=webkitForce no result Will simple refactoring fix that issue?

[mhartington]

Hmm, yeah not seeing it either. Hmm, will test on chrome canary and maybe even build chromium to check it out.

[mike-nelson]

You don't need Canary. We are seeing this warning appear on the production version of chrome (latest version, you may just need to update).

Mike Nelson // CEO (and Developer) beweb // p. 09 3077042 // m. 027 4403757

On 9/09/2015, at 5:43 am, Mike Hartington notifications@github.com wrote:

Hmm, yeah not seeing it either. Hmm, will test on chrome canary and maybe even build chromium to check it out.

— Reply to this email directly or view it on GitHub.

[mhartington]

not for that, but to see if anything breaks in canary or chromium

[vko-online]

Don't worry boys, all of this warnings are just browser internal things, we don't need to do anything. Here's demo.

Before we start

• Make sure you have touch events enabled, go to chrome://flags/ then select enabled on Enable touch events Mac, Windows, Linux, Chrome OS ^{use CMD + F to search} By default it's auto, which will not work
• Prepare sample, i used this function handleStart(evt) { evt.preventDefault(); console.log(evt); } and var el = document.body; el.addEventListener("touchstart", handleStart, false);

Result

Now i see webkitForce, and notice, there is also force, just like webkitRadiusX, radiusX I guess chrome is built by modules, and some modules use old events. Don't worry imho

[atans2468]

just to clarify is this just a fix for the Touch.webkitForce errors? because I am still getting the same errors that I noted above with ionic.bundle.js

[vko-online]

@atans2468 it is not fix, it's just proof that those warnings your receive in console are ignorable, it will not break your code, it has nothing to do with ionic i believe. And note: they are just warnings

[atans2468]

hmmmm well I'm still having an unexplainable issue with the ionic.bundle.js file that is keeping anything in my app from submitting to firebase. Were you just referring to the webkit warnings or also the "SVG's SMIL animations....." warning, I'll attach an image so that you can see exactly what I'm seeing:

[mhartington]

SVG animations: Yes those are in ionics code, I will look into them and move them over to css.

As for the Touch warnings, I'm on @vko-online side, I don't think we have anything to worry about.

No need to keep commenting and. I know where the svg errors are coming from.

[TomaszWaszczyk]

I have the same warning...

[omurbilgili]

Same warning while using "$ionicHistory.goBack();"

[loian]

Same warning in the tab application example: ionic.bundle.js:1162 'Touch.webkitRadiusX' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusX' instead.

It's a bit worrying, we are approaching november.

[cihadhoruzoglu]

When do you plan to fix this warning?

[mhartington]

Again, I've said this before....

As for the Touch warnings, we have anything to worry about.

If you look through Ionic and angular's source code, you won't find Touch.webkitRadiusX anywhere. This is just a generic warning that chrome is giving incase any framework is using that method. We are all set :+1: @cihadhoruzoglu and @loian

[kugaevsky]

+1

[mhartington]

Again, nothing for us to do here. These are generic warnings inside of chrome in case anyone was using those prefixed APIs, which ionic is not.

[laidig]

If there's nothing to worry about, how about closing this bug? ;)

[majornorth]

Update: Sometimes (often) I just need to explain problems to get unblocked. Turns out that this was an obvious error on my part—ng-controller wasn't specified for my header-bar element. Derp.

@mhartington I just ran into this error when trying to call an ng-click on a button in ion-header-bar—and it's a problem for me because I'm using $state to route the user to another view and the click event is not propagating.

I'm following up on this thread because I'm unsure if the error is due the code I wrote, Ionic, or any dependencies.

This is the error, which you're familiar with:

'webkitMovementX' is deprecated. Please use 'movementX' instead. ionic.bundle.js:1162
'webkitMovementY' is deprecated. Please use 'movementY' instead. ionic.bundle.js:1162

This is my markup:

<ion-header-bar class="bar-stable">
    <button class="button button-icon icon ion-person" ng-click="logUserOut()">
    </button>
    <h1 class="title">Title</h1>
</ion-header-bar>

When I click on the button, the logUserOut() never fires. I've tried putting a logging statement and nothing shows in the console. When I use this function as an ng-click elsewhere in the view, it works fine.

This is the code the function calls:

$scope.logUserOut = function() {
    $state.go('login');
  };

Appreciate any clarification you might provide on this issue :)

P.S. I'm building my first Ionic project for my bloc.io bootcamp capstone and I'm loving your framework and all the supporting tools (the marketplace is great). Keep up the great work!

[Yemolai]

I'd like to add that I was having an issue with on-hold and getting these warnings. Found this issue post and did helped me at some clues about where to look, but this error and warnings ocurred only testing my app on Samsung devices. After some search I've found that adding overflow-scroll=false at <ion-content> to solve the issue. My specific issue was that on-hold was working for the default time but i was unable to let the user holding the button for longer than the default time for long-press, forcing the app to run on-release even if the user was still holding the button.

just adding here if someone have the same issue and search around here. :)

[isabelleaubron]

I have the warning "SVG's SMIL animations....." when I add <ion-spinner> in $ionicLoading template

[brace110]

Still getting the warnings,

this solves it:

    if (key == 'webkitMovementX' || key == 'webkitMovementY') {
      continue;
    }

Add the above code in Ionic.bundle.js on line 1173. Final code see below. Use at own risk.

  extend: function extend(dest, src, merge) {
  for (var key in src) {
    if(dest[key] !== undefined && merge) {
      continue;
    }
    if (key == 'webkitMovementX' || key == 'webkitMovementY') {
      continue;
    }
    dest[key] = src[key];
  }
  return dest;
}

[adeelzx]

I am having the same warning when I am clicking on a button that has a functionality of popover menu in the navigation bar. Unfortunately popover functionality is not working at this place, don't know why. I have implemented the same functionality in other screen as well and its working fine with no warning.

Above screen shows the warning and popover menu is not coming.

In this screen everything is working with no errors/warning.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.