Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
fix(overlay): Fixes an issue with overlay placement in firefox.
Browse files Browse the repository at this point in the history
When hovering a SVGElement in firefox the MouseEvent delivered a wrong
value for the placement offset. Added a special code branch that
deals with that issue.

Closes #339
  • Loading branch information
tomheller committed Dec 18, 2019
1 parent 08eb18d commit 458db13
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion components/overlay/src/overlay-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,13 +163,23 @@ export class DtOverlayTrigger<T> extends _DtOverlayTriggerMixin
offsetX = offsetX - (hostLeft - this._svgRect.left);
offsetY = offsetY - (hostTop - this._svgRect.top);
}
if (event.target !== host) {
if (target !== host && target instanceof HTMLElement) {
const targetRect = target.getBoundingClientRect();
const targetLeft = targetRect.left;
const targetTop = targetRect.top;
offsetX = targetLeft - hostLeft + offsetX;
offsetY = targetTop - hostTop + offsetY;
}
// Run a special case, if the target is an SVG.
// Firefox gives back offsetX and offsetY when hovering on svgShapeElements
// that are relating to the viewBox of the root svg.
// We need to fall back to other ways of calculating the offset
// positioning, as there is no consistency across browser vendors
// on how they calculate offsetX and offsetY within svgShapeElements.
if (target !== host && target instanceof SVGElement) {
offsetX = event.clientX - hostLeft;
offsetY = event.clientY - hostTop;
}
this._dtOverlayRef.updatePosition(offsetX, offsetY);
}
}
Expand Down

0 comments on commit 458db13

Please sign in to comment.