ZoomToElement is buggy

[sikandarchishty]

Hi, I have a very wide div, basically I am making a Family Hierarchy so it will get as wider as possible.

CodeSandbox

ZoomToElement doesn't properly zoom to element, its always near to that element but not exactly on the said element.

Is there a fix for this? or can we ZoomToElement's specific part?

[byNiko]

I've noticed this as well and have been trying to figure it out. I notice that if the viewport is smaller than the zoom-pan-pinch window and you have scrolled the window - the zoomToElement is VERY wrong.

Test Example

I have been making the window require scrolling by either adding a margin at the top of the page - or opening dev tools at the bottom of the screen

[byNiko]

I made a fix for my issue - adding window.scrollX to the getOffset() calculation. will make a pull request

file path: src -> core -> handlers -> handlers.utils.ts

function getOffset(element: HTMLElement): PositionType { let el = element;

let offsetLeft = 0; let offsetTop = 0;

while (el) { offsetLeft += el.offsetLeft; offsetTop += el.offsetTop;

el = el.offsetParent as HTMLElement;

}

return { x: offsetLeft - window.scrollX, y: offsetTop - window.scrollY, }; }

[murtaza-ch]

@byNiko Can you please provide me the source code or above Text Example?

[byNiko]

@byNiko Can you please provide me the source code or above Text Example?

Hi there - this fix has already been merged: https://github.com/prc5/react-zoom-pan-pinch/pull/285