IE8 mouse click and tooltip triggered outside canvas area

[GoogleCodeExporter]

What steps will reproduce the problem?

I have a form created in javascript.
There is a div representing the form.
In that, there is a nested div representing a toolbar.
In that, there is a nested div representing a toolbar button.
The button has a 'title' (tooltip) and an 'onclick' function.
The button uses a canvas to display a line-drawing.

What is the expected output? What do you see instead?

I expect the tooltip to appear only when hovering over the button, and the 
onclick event to occur only when clicking on the button.

Instead, both of these occur when the mouse is anywhere in an area on or 
vertically below the button, but within the form.

What version of the product are you using? On what operating system?

I downloaded the latest version from svn today (19th July 2012). I am using 
Internet Explorer 8 on Windows Server 2003 and Windows XP.

Please provide any additional information below.

See attached screenshot. The mouse is hovering where the tooltip appears, which 
is nowhere near the button it relates to.

If I remove all the canvas elements from the buttons, the problem disappears.

I can try to come up with a self-contained example if required.

Original issue reported on code.google.com by fr...@chagford.com on 19 Jul 2012 at 9:19

Attachments:

• screenshot.JPG

[GoogleCodeExporter]

Original comment by fr...@chagford.com on 20 Jul 2012 at 6:36

Attachments:

• screenshot.JPG

[GoogleCodeExporter]

Here are some more results.

I changed the toolbar buttons from 'div - float left' to 'span', and removed 
all the canvas elements.

The result is screenshot2. The buttons that had canvases now have no width, but 
that is to be expected. Otherwise it works correctly.

Then I added the canvas elements back.

The result is screenshot3. It looks weird. The buttons themselves have moved to 
a position halfway down the form, but the canvas drawings are in the correct 
place. Interestingly, the area between where the buttons should appear and 
where they do appear is the area that responds to button mouse clicks.

Then I added a background colour to one of the canvas elements (the canvas 
itself, not the span element).

The result is screenshot4. Now the canvas with the background colour appears 
over its button correctly, though still halfway down the screen.

I have tested this with Firefox, Chrome, Opera, and Safari, all of which have 
native Canvas elements, and they all behave as expected with all the above 
tests, so it is only Explorer Canvas that misbehaves.

Original comment by fr...@chagford.com on 20 Jul 2012 at 7:27

Attachments:

• screenshot2.JPG
• screenshot3.JPG
• screenshot4.JPG

[GoogleCodeExporter]

If anyone wants to play with this, here is a working example.

Click the button, and 'Clicked!' will appear at the top.

Click anywhere in the form, down to but not below a certain point, and 
'Clicked!' still appears. Below that point 'Clicked!' does not appear.

Remove the lines setting up the canvas, and only clicking on the button area 
generates 'Clicked!', which is the desired behaviour.

Any comments will be much appreciated.

Frank

Original comment by fr...@chagford.com on 20 Jul 2012 at 2:34

Attachments:

• test31.html