WebKit issues with event.layerX and event.layerY

Question

I just noticed that I get tons of deprecated warnings in the latest (canary) build of Chrome.

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Looks like jQuery is screwing thing up.

I'm using: jquery-1.6.1.min.js.

Would it help to upgrade to the latest jQuery version or isn't it fixed yet or is it a Chrome bug or is it something else.

PS

I cannot show you code because I think it's a general error, but I suspect the warnings get thrown when I try to access a jQuery object or when jQuery tries to access the layerX / layerY (well I'm pretty sure that's the case considering the error :P).

jQuery probably copies those properties into the jQuery object.

So...

What's going on?

EDIT

jQuery 1.7 is out and fixes this issue.

Read more at their blog, here.

The warning is still prevalent in Chrome...however the message is not seen in Safari — Girish, Dec 19 '11 at 09:37
jQuery 1.7 is still throw the warning seems not yet fixed....... — Krish, Feb 21 '12 at 10:45
Have you read all the posts in this thread, because IMHO the issue is resilved. Perhaps it's a browser plugin? — PeeHaa, Feb 21 '12 at 10:52
Is this actually REALLY an issue?! It causes no lack of functionality, and shows no messages to the user (only via dev console - at which point you would assume they're a dev and understand it's a webkit issue..). — Stuart.Sklinar, Apr 09 '12 at 18:48
@Stuart.Sklinar I don't know whether you also code in PHP, but if you do I'm pretty sure you also use `@` to suppress errors. — PeeHaa, Apr 11 '12 at 20:42
I see the issue with a clean console, but I know that Chrome groups all the errors together, so you would only get a single line... as for the performance... I've not seen it as an issue yet. — Stuart.Sklinar, Apr 12 '12 at 09:25
chrome only groups similar errors if there have been no interim errors in between. So the issue is really, that it makes it more cumbersome to use the console for debugging. Its an irritant, but as yet I dont think any jQuery functionality is actually broken — carpii, May 28 '12 at 04:00
It's worth noting, for posterity, that WebKit ([bug 86264](https://bugs.webkit.org/show_bug.cgi?id=86264)) has backed off from their decision to deprecate `layerX` and `layerY`, at least until they give it more careful consideration. It's also worth noting that IE recently *[**added**](http://msdn.microsoft.com/en-us/library/ms530302%28VS.85%29.aspx)* `layerX` and `layerY` after not having it until version 9. My guess is these properties aren't going away -- at least until there is a suitable W3C replacement, which won't be soon. The warnings are gone in recent versions of WebKit. — Nathan Wall, Sep 06 '12 at 03:44

score 464 · Accepted Answer · edited May 23 '17 at 11:47

What's going on!?

"jQuery probably copies those properties into the jQuery object." You're exactly correct, so it sounds like you already know! :)

Hopefully jQuery will update their code to stop touching that, but at the same time WebKit should have known better than to log a deprecation warning on an event (at least in my opinion). One mousemove handler and your console explodes. :)

Here's a recent jQuery ticket: http://bugs.jquery.com/ticket/10531

UPDATE: This is fixed now if you upgrade to jQuery 1.7.

Please note that if upgrading jQuery doesn't fix the issue for you it may have something to do with used extensions / plugins as Jake stated in his answer.

score 74 · Answer 2 · edited Apr 17 '12 at 17:16

http://jsperf.com/removing-event-props/2

The temporary fix is to run this code before you do any event binding via jQuery:

(function(){
    // remove layerX and layerY
    var all = $.event.props,
        len = all.length,
        res = [];
    while (len--) {
      var el = all[len];
      if (el != 'layerX' && el != 'layerY') res.push(el);
    }
    $.event.props = res;
}());

UPDATE

See the latest performance tests to find out what the fastest way is to remove the event props.

score 28 · Answer 3 · edited Jun 11 '12 at 15:43

28

The shortest solution to this is this one-liner:

$.event.props = $.event.props.join('|').replace('layerX|layerY|', '').split('|');

edited Jun 11 '12 at 15:43

Peter Mortensen

30,738
21
105
131

answered Feb 06 '12 at 14:30

mekwall

28,614
6
75
77

score 21 · Answer 4 · answered Nov 14 '11 at 23:50

21

The enormous amount of these messages ^{(I just got 80000 of them while using gmail)} is indeed a bug in Chrome.

You should star the issue on Chromium.

answered Nov 14 '11 at 23:50

törzsmókus

1,799
2
21
28

score 14 · Answer 5 · edited Jun 11 '12 at 15:41

14

It can also be caused by Chrome extensions, so check them if the jQuery update doesn't work.

edited Jun 11 '12 at 15:41

Peter Mortensen

30,738
21
105
131

answered Dec 15 '11 at 22:41

Jake

558
4
12

score 5 · Answer 6 · edited Jun 11 '12 at 15:42

5

I've used this after calling any event:

$.event.props.splice($.event.props.indexOf("layerY"),1);
$.event.props.splice($.event.props.indexOf("layerX"),1);

That worked for me, I have no warning messages since I've made this patch on my code.

edited Jun 11 '12 at 15:42

Peter Mortensen

30,738
21
105
131

answered Jan 24 '12 at 06:58

Juan Carlos Arevalo

181
2
5

score 5 · Answer 7 · answered Mar 01 '12 at 09:59

5

Here is another one line fix, without replacing the original instance of $.event.props (which may or may not be an array), just in case :-)

$.each(["layerX","layerY"], function(i,v) { if((i=p.indexOf(v)) > -1) $.fn.splice.call($.event.props,i,1) })

answered Mar 01 '12 at 09:59

DUzun

1,693
17
15

score 4 · Answer 8 · answered Jan 10 '12 at 12:07

As well as the configuration issues listed in the other answers, this error can be triggered by a simple error in your own code: forgetting the '#' in from of a jQuery ID selector.

I had code looking like

$('datenotset_2341').click(function(){
 ....etc....
});

(missing out the # in front of the "datenotset")

As well as (obviously) failing to work, it triggered this error message in Chrome.

score 3 · Answer 9 · answered Apr 09 '12 at 08:18

I ran into this issue in my own code. It turns out I was iterating over all properties on an event object as part of a debugging/inspection tool that I was using. In this particular instance I was using jQuery's $.extend to clone the object for later inspection, but I believe any of the standard iteration techniques in the various toolkits would have triggered the warning as well.

I mention it here because my initial thought of simply searching the code base for instances of layerX or layerY didn't help - the property was being referenced generically, not by name.

WebKit issues with event.layerX and event.layerY

9 Answers9

Linked

Related