#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:
Attachments (3)
Change History (17)
comment:1 Changed 9 years ago by
comment:2 Changed 9 years ago by
| Component: | General → DojoX Wires |
|---|---|
| Owner: | set to Jared Jurkiewicz |
| Version: | 1.7.0b1 → 1.6.1 |
comment:3 Changed 9 years ago by
| Component: | DojoX Wires → DojoX Widgets |
|---|---|
| Owner: | changed from Jared Jurkiewicz to dante |
comment:4 Changed 7 years ago by
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.
comment:5 Changed 7 years ago by
Probably it should be using pageX/pageY across the board, like I did in [27949] for SplitContainer.
comment:6 Changed 5 years ago by
| Milestone: | tbd → 1.12 |
|---|---|
| Resolution: | → patchwelcome |
| Status: | new → closed |
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
| Resolution: | patchwelcome |
|---|---|
| Status: | closed → reopened |
comment:14 Changed 3 years ago by
| Milestone: | 1.13 → 1.8.14 |
|---|
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.