From 458db1380e144c77dc574beaa045dcabea61783d Mon Sep 17 00:00:00 2001 From: Thomas Heller Date: Tue, 17 Dec 2019 14:30:21 +0100 Subject: [PATCH] fix(overlay): Fixes an issue with overlay placement in firefox. 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 --- components/overlay/src/overlay-trigger.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/components/overlay/src/overlay-trigger.ts b/components/overlay/src/overlay-trigger.ts index 0e6c793775..7dc06fb4c0 100644 --- a/components/overlay/src/overlay-trigger.ts +++ b/components/overlay/src/overlay-trigger.ts @@ -163,13 +163,23 @@ export class DtOverlayTrigger 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); } }