Opened 8 years ago

Closed 7 years ago

#14114 closed defect (invalid)

Chrome / Webkit removing event.layerX and event.layerY

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: #14754 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.

Attachments (1)

keypress.html (580 bytes) - added by bill 7 years ago.
test case for problem in dojo/_base/connect.js

Download all attachments as: .zip

Change History (16)

comment:1 Changed 7 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 7 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 7 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 7 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 7 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 7 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 7 years ago by dvasquez (previous) (diff)

comment:7 in reply to:  6 Changed 7 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 7 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 7 years ago by bill (previous) (diff)

comment:9 Changed 7 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 7 years ago by bill

Attachment: keypress.html added

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

comment:10 Changed 7 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.

comment:11 Changed 7 years ago by bill

In [27949]:

Remove layerX/layerY references from SplitContainer. AFAICT pageX/pageY is enough to handle slider drags, so there's no reason to access layerX/layerY/offsetX/offsetY too. Fixes #14840, refs #14114 !strict.

comment:12 Changed 7 years ago by janefung

There is also another one

I added a text box as follow:

<input id="id1" data-dojo-type="dojox.mobile.TextBox?" placeHolder="Airport code, city or country" class="searchbox"></input>

As soon as i typed anything in the check box, I get the error

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

My chrome is 18.0.1025.142 m Dojo = 1.7

Thanks

comment:13 Changed 7 years ago by bill

Blocked By: 14754 added

That happens in 1.7 but it's already been fixed in trunk.

comment:14 Changed 7 years ago by kbenjamin

Webkit is having a change of heart on this matter:

https://bugs.webkit.org/show_bug.cgi?id=21868#c21 states:

For the record, we have decided to remove the warning for several reasons:

  • we need to assess the web-compatibility issues.
  • we need to engage the standard bodies to get a replacement.

comment:15 Changed 7 years ago by bill

Resolution: invalid
Status: newclosed

OK, guess we should close this ticket.

Note: See TracTickets for help on using tickets.