Opened 8 years ago

Closed 3 years ago

Last modified 3 years ago

#13268 closed defect (fixed)

dojox.widget.ColorPicker does not work in IE9 or Opera 11

Reported by: bdmayes Owned by: dante
Priority: high Milestone: 1.8.14
Component: DojoX Widgets Version: 1.6.1
Keywords: Cc:
Blocked By: Blocking:

Description

There appears to be a problem with the ColorPicker? object in several browsers, notably IE9 and Opera 11. It works fine in several versions of Chrome and Firefox. To reproduce simply visit this page in either IE9 or Opera 11 and try any of the examples:

http://dojotoolkit.org/reference-guide/dojox/widget/ColorPicker.html

The object will behave strangely when clicked and the animated cursors will appear to simply fly off the top of the page. The color will then only be set to either red (FF0000) or white (FFFFFF).

If you are using IE9, make sure to press F12 and set the browser mode to IE9 and document mode to IE9 standards.

While visiting dojotoolkit.org I did not see any official support for IE9 or Opera 11 yet (just IE 6-8 and Opera 10.5). However, I can only assume that dojo will soon support IE9 due to the popularity of IE. There have already been other bugs fixed specifically for IE9, so I'm hoping this one will be handled too:

http://bugs.dojotoolkit.org/ticket/12257

Attachments (3)

chrome.png (6.1 KB) - added by bdmayes 7 years ago.
event attributes in chrome
IE8.png (2.7 KB) - added by bdmayes 7 years ago.
event attributes in IE8
IE9.png (5.3 KB) - added by bdmayes 7 years ago.
event attributes in IE9

Download all attachments as: .zip

Change History (17)

comment:1 in reply to:  description Changed 8 years ago by bdmayes

My apologies, but I failed to change the release. This issue is occurring on version 1.6.1 which I downloaded today. It also clearly fails on whatever version the reference guide is using as well.

comment:2 Changed 8 years ago by bill

Component: GeneralDojoX Wires
Owner: set to Jared Jurkiewicz
Version: 1.7.0b11.6.1

comment:3 Changed 8 years ago by bill

Component: DojoX WiresDojoX Widgets
Owner: changed from Jared Jurkiewicz to dante

Changed 7 years ago by bdmayes

Attachment: chrome.png added

event attributes in chrome

Changed 7 years ago by bdmayes

Attachment: IE8.png added

event attributes in IE8

Changed 7 years ago by bdmayes

Attachment: IE9.png added

event attributes in IE9

comment:4 Changed 7 years ago by bdmayes

Due to an upcoming (new) release of my own application I really needed to get this fixed, so I started stepping through the code. If anyone is even looking at this case, the problem stems from the use of the layerX and layerY attributes on the event on the _setPoint() function of ColorPicker?.js:

var newTop = evt.layerY - satSelCenterH;
var newLeft = evt.layerX - satSelCenterW;

It looks like these fields are just wrong/broken in IE 9 and 10. The IE9 API information states that the attributes (such as layerX) are provided for cross-browser compatibility only, and to use x instead:

http://msdn.microsoft.com/en-us/library/ie/gg130967(v=vs.85).aspx

However, the values of evt.layerX and evt.x are completely different. The layerX and layerY attributes always seem to be returning negative values for me, which explains why the animation appears to just fly off the top of the element.

In order to fix this, you can simply use the isIE / has("ie") functions in dojo. So a quick hack is something like this:

if (dojo.isIE >= 9) {
  var newTop = evt.y - satSelCenterH;
  var newLeft = evt.x - satSelCenterW;

}
else {
  var newTop = evt.layerY - satSelCenterH;
  var newLeft = evt.layerX - satSelCenterW;
}

A better solution would be to use the event handling system built into dojo and stop relying directly on attributes of the event object returned by the browser (since they obviously differ depending on browser). In this case you would have to obtain the X,Y coordinates of the event, and then calculate the offset of the event from the element where it occurred, while taking into account that the element itself has a particular offset within the entire document.

Again, for my own application I am just using the above hack but the ideal solution from dojo should include a call to dojo's own event handling mechanism, with offsets calculated from that information. In this manner, assuming the event handling system is truly browser independent, then the positioning information will automatically work as well.

For the curious I have attached some various screenshots showing the difference between layerX/layerY and x/y from Chrome, IE8, and IE9. In each case I was trying to click as close to the center of the image as possible. Given that the background image is 150x150, each click is as close to (x=75, y=75) as possible.

Last edited 7 years ago by bdmayes (previous) (diff)

comment:5 Changed 7 years ago by bill

Probably it should be using pageX/pageY across the board, like I did in [27949] for SplitContainer.

comment:6 Changed 4 years ago by dylan

Milestone: tbd1.12
Resolution: patchwelcome
Status: newclosed

Given that no one has shown interest in creating a patch in the past 4+ years, I'm closing this as patchwelcome.

comment:7 Changed 3 years ago by dylan

Resolution: patchwelcome
Status: closedreopened

comment:8 Changed 3 years ago by dylans <dylan@…>

Resolution: fixed
Status: reopenedclosed

In 4e38c37/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:9 Changed 3 years ago by dylans <dylan@…>

In 1dd1e72/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:10 Changed 3 years ago by dylans <dylan@…>

In c220743/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:11 Changed 3 years ago by dylans <dylan@…>

In 77b8532/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:12 Changed 3 years ago by dylans <dylan@…>

In c0a32ae9/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:13 Changed 3 years ago by dylans <dylan@…>

In 855dea09/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:14 Changed 3 years ago by dylan

Milestone: 1.131.8.14
Note: See TracTickets for help on using tickets.