Opened 9 years ago

Last modified 8 years ago

#14114 closed defect

Chrome / Webkit removing event.layerX and event.layerY — at Version 10

Reported by: darth Owned by:
Priority: high Milestone: tbd
Component: General Version: 1.6.1
Keywords: event, webkit, layerx, layery, chrome Cc: Kris Zyp, Douglas Hays
Blocked By: Blocking:

Description (last modified by bill)

Chrome shows the following warning when using Dojo

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

Dojo should not rely on them anymore for webkit.

Change History (11)

comment:1 Changed 9 years ago by dougtmayer

This is now in Chrome stable:

https://bugs.webkit.org/show_bug.cgi?id=69951 (deprecation warning) https://bugs.webkit.org/show_bug.cgi?id=21868 (outright removal)

It will also be in Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=674292

comment:2 Changed 9 years ago by Karl Tiedt

Just for visibility sake: (from latest git pull as of 2 minutes ago)

proton:dojotoolkit ktiedt$ grep -R layer[XY] *
dijit/layout/SplitContainer.js:			client = e.layerX || e.offsetX || 0;
dijit/layout/SplitContainer.js:			client = e.layerY || e.offsetY || 0;
dojo/dom-geometry.js:		// 		offsetX, offsetY, layerX, and layerX properties
dojo/dom-geometry.js:		if(!("layerX" in event)){
dojo/dom-geometry.js:			event.layerX = event.offsetX;
dojo/dom-geometry.js:			event.layerY = event.offsetY;
dojox/gantt/GanttChart.js:						var hlTop = parseInt(event.layerY / rowHeight) * rowHeight + this.panelTimeHeight - this.contentData.scrollTop;
dojox/gfx/silverlight.js:				ev.x = ev.offsetX = ev.layerX = p.x;
dojox/gfx/silverlight.js:				ev.y = ev.offsetY = ev.layerY = p.y;
dojox/grid/_Builder.js:			var n, x = e.layerX;
dojox/mobile/PageIndicator.js:			if(e.layerX < this._tblNode.offsetLeft){
dojox/mobile/PageIndicator.js:			}else if(e.layerX > this._tblNode.offsetLeft + this._tblNode.offsetWidth){
dojox/widget/ColorPicker.js:			var ypos = evt.layerY - selCenter;
dojox/widget/ColorPicker.js:			var newTop = evt.layerY - satSelCenterH;
dojox/widget/ColorPicker.js:			var newLeft = evt.layerX - satSelCenterW;

comment:3 Changed 9 years ago by bill

See also http://www.quirksmode.org/dom/w3c_cssom.html#mousepos.

When does dojo show these warnings, exactly? Just for the few widgets mentioned above, or more pervasively?

comment:4 Changed 9 years ago by Karl Tiedt

The warnings are fired by the browser anytime .layerX/Y are accessed via JS wether it be reading or setting it seems

comment:5 Changed 9 years ago by bill

Hmm, I downloaded Chrome Canary and I don't see any warnings in the console (the javascript console). This is from testing dijit/tests/test_Dialog.html, dijit/tests/layout/test_SplitContainer.html, and dojox/widget/tests/test_ColorPicker.html. Is there something I'm doing wrong?

comment:6 Changed 9 years ago by dvasquez

I'm getting this after a Chrome/MacBook? Pro restart. I'm running Chrome 16.0.912.63.

These are the relevant tests I could quickly find:
dijit.tests.layout.robot.AccordionContainer_a11y
dijit.tests.layout.robot.BorderContainer?
dijit.tests.layout.robot.BorderContainer_complex
dijit.tests.layout.robot.BorderContainer_nested

Last edited 9 years ago by dvasquez (previous) (diff)

comment:7 in reply to:  6 Changed 9 years ago by lmds

I'm seeing the warnings on Chrome (16.0.912.63/Ubuntu and 10.0.912.75m/Windows) when hovering over the headers in an EnhancedGrid?, e.g. http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/enhanced/test_enhanced_grid_pagination.html

comment:8 Changed 9 years ago by kbenjamin

Look into dijit.layout.TabContainer and dijit.form.Textarea.

I'm seeing these warnings on both a dijit.form.Textarea and dijit.layout.ContentPane with contenteditable set when it is within a TabContainer.

The ContentPane alone (not wrapped in a TabContainer) does not fire the warning. I also tested the ContentPane inside a BorderContainer and it's fine there, too.

Reading the discussion on the Chrome bug reports it's clear that they don't know that a potentially large number of users are using layerx and layery. Maybe they should be told by someone on the Dojo dev team.

Last edited 9 years ago by bill (previous) (diff)

comment:9 Changed 9 years ago by bill

Cc: Kris Zyp added

This happens when typing into a simple dijit.form.TextBox, and I traced at least part of it to the back-compat code dojo/_base/connect.js for "keypress" and "keydown":

var _synthesizeEvent = function(evt, props){
        var faux = lang.mixin({}, evt, props);

mixin() is referencing layerX and layerY from the event object, along with all the other properties... so the warning message will go away whenever layerX and layerY disappear from the evt object. But the annoying thing is that all these spurious warning messages are alarming, and hide the real places where the error occurs.

I tried switching the lang.mixin() to lang.delegate(evt, props) but that doesn't work so well on IE; the event object disappears before it's referenced and (for example) evt.type is undefined.

I'll attach a test case.

Changed 9 years ago by bill

Attachment: keypress.html added

test case for problem in dojo/_base/connect.js

comment:10 Changed 9 years ago by bill

Cc: Douglas Hays added
Description: modified (diff)

It also happens due to code in _TextBoxMixin.js, which also generates a faux event:

var faux = lang.mixin({}, e, {
        charOrCode: charCode,
        wasConsumed: false,
        preventDefault: function(){
                faux.wasConsumed = true;
                e.preventDefault();
        },
        stopPropagation: function(){ e.stopPropagation(); }
});

thus again copying layerX and layerY from the evt object, and generating more warnings.

I filed #14754 and #14755 to try to address those two issues.

Note: See TracTickets for help on using tickets.