fix: stop loupe being shown in incorrect position on mouseenter

[frederickfogerty]

Description

This library had an issue where if the mouse was quickly moved into the container and stopped, the loupe would be incorrectly positioned.

This was because the internal code was using getBoundingClientRect to calculate the width of the zoom pane, which was changing during the mouseenter animation. This animation was using CSS transforms to change the apparent width of the zoom pane. This caused the positioning logic to incorrectly position the image, and the loupe container.

This PR fixes this by using offsetWidth and offsetHeight instead, which aren't affected by transforms.

The issue:

After solution:

This fixes #86.

Bug Fix

• All existing unit tests are still passing (if applicable)
• [N/A] Add new passing unit tests to cover the code introduced by your PR
• [N/A] Update the readme
• [N/A] Update or add any necessary API documentation
• Add some steps so we can test your bug fix
• The PR title is in the conventional commit format: e.g. fix(<area>): fixed bug #issue-number
• Add your info to the contributors array in package.json!

Steps to Test

To test this PR:

1. Clone this PR, and run npm install && npm run build.
2. Update the new Drift(...) part in index.html to the snippet below to make the bug easier to reproduce.
3. Then, run a webserver in the root of the project. I use browser-sync for this browser-sync start --server --files "dist/*".
4. Observe that when the mouse is quickly moved over the image, and then stopped, that the loupe is initially positioned incorrectly.
5. Checkout this PR's branch
6. Observe that the loupe is no longer positioned incorrectly.

Code snippet to change relevant part index.html to:

		new Drift(document.querySelector('.drift-demo-trigger'), {
			paneContainer: document.querySelector('.detail'),
			hoverDelay: 200, // make this longer to make the problem more obvious
			zoomFactor: 2,
			inlinePane: true,
		});

[albertmejia]

👍 LGTM