Context Menu displaying in wrong position on IE11

GoJS
1

In the below image, I right clicked on the diagram where the red circle indicates, but the context menu appeared up and to the left of my mouse position.

image

The same thing occurs on nodes.

image

I’m running GoJS v1.8.27; in Chrome, the context menus appear in the expected position.

Do you know what could be causing this?

2

The context menu is in HTML, isn’t it? If so, I’d check the code that is setting the CSS properties for positioning the HTML on the page.

3

It’s very straightforward code:

return this.$go(go.HTMLInfo, {
    show: (obj, diagram, tool) => this.showContent(obj, diagram, tool),
    hide: (obj, diagram, tool) => this.hideContent(obj, diagram, tool)
 });

// showContent
container.style.left = mouseEvent.x + "px";
container.style.top = mouseEvent.y + "px";

I’m not sure if something could affect the coordinates that the mouseEvent returns? Is the mouseEvent coordinate here relative to the edge of the GoJS diagram or the browser window? The difference from where I click to the top of the context menu seems consistent with the space between the top of the diagram and the top of the IE window.

4

Are you sure you are getting the right properties from MouseEvent? Make sure the coordinate systems are the same in all browsers.

5

I solved the issue; we were using mouseEvent.x & mouseEvent.y. These are not standard across browsers.

Switching to mouseEvent.clientX & mouseEvent.clientY fixed the issue.

Thanks!