Skip to content

fix: tooltip initial position uses clientX/2 causing wrong position at non-default browser zoom #402

Description

@mariohmol

Bug

In src/events.ts, when the tooltip div is created for the first time, its initial position is set using clientX / 2 and clientY / 2:

// events.ts ~line 139
pGanttChartObj.vTool.style.left = Math.floor(((e) ? e.clientX : (<MouseEvent>window.event).clientX) / 2) + 'px';
pGanttChartObj.vTool.style.top  = Math.floor(((e) ? e.clientY : (<MouseEvent>window.event).clientY) / 2) + 'px';

The division by 2 is incorrect. clientX/clientY are already in CSS pixels and do not need to be halved. This same value appears in the bundled dist/jsgantt.js (~line 1253) and dist/src/events.js (~line 138).

Effect

  • The tooltip div is created at half the cursor's CSS-pixel position.
  • updateFlyingObj (called immediately after on the first show) corrects the final resting position, so the steady-state tooltip is fine.
  • However, when vUseMove / animation is enabled, the tooltip animates from the halved (wrong) origin to the correct position — visible as a sliding artefact from the top-left.
  • At non-100 % browser zoom levels the halved origin drifts further from the cursor, making the animation artefact more pronounced. This is the root cause of the date/tooltip misalignment reported in ng-gantt#29.

Proposed Fix

Remove the / 2 so the initial off-screen hidden position matches what updateFlyingObj will compute:

pGanttChartObj.vTool.style.left = Math.floor((e) ? e.clientX : (<MouseEvent>window.event).clientX) + 'px';
pGanttChartObj.vTool.style.top  = Math.floor((e) ? e.clientY : (<MouseEvent>window.event).clientY) + 'px';

The same one-line fix must be applied to both dist/jsgantt.js and dist/src/events.js.

Files to Change

File Line Change
src/events.ts ~139–140 remove / 2 from clientX and clientY
dist/jsgantt.js ~1253–1254 same
dist/src/events.js ~138–139 same

Context

The / 2 appears to be a leftover from legacy IE zoom-factor compensation. Modern browsers (and IE9+) already return CSS pixels in clientX/clientY, so the division is no longer needed and actively breaks tooltip animation at non-100 % zoom.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions