.moveable-control-box placed on incorrect position

[seahindeniz]

Environments

• Framework name: Vanilla
• Framework version: -
• Moveable Component version: 0.34.2
• Testable Address(optional): added blow

Description

When I create a moveable instance, the control box container position gets calculated incorrectly.
Here's a demo video

Sample 1 - https://www.marionnaud.at/

Screen.Recording.2022-08-03.at.10.26.32.mp4

Sample 2 - https://www.iciparisxl.nl/

Screen.Recording.2022-08-03.at.11.38.11.mp4

For this case, the reproduce example is going to be a Tampermonkey user script file. I couldn't able to identify the source of the problem because from what I can see, the getBoundingClientRect returns the correct output. But the main issue is happening on the navigation bar of the sample websites.

New Userscript.user.js

// ==UserScript==
// @name         Moveable position issue
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  MRE - Minimal reproducible example
// @author       You
// @match        https://www.marionnaud.at/*
// @match        https://www.iciparisxl.nl/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=marionnaud.at
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/moveable/0.34.2/moveable.min.js
// @run-at       document-idle
// ==/UserScript==


(() => {
    // Prevent other interractions to select an element
    ['click', 'mouseover', 'mouseenter', 'mouseleave'].forEach(name => {
        window.addEventListener(name, event => {
            event.stopPropagation();
            event.preventDefault();
        }, true);
    });

    let moveableInstance;

    window.addEventListener('click', event => {
        moveableInstance?.destroy();

        moveableInstance = new Moveable(document.body, {
            target: event.target,
            edge: true,
            keepRatio: false,
            origin: false,
            renderDirections: ['n', 'nw', 'ne', 's', 'se', 'sw', 'e', 'w'],
            resizable: true,
            zoom: 0.645,
            preventClickDefault: true,
        });
    }, true);
})();

[seahindeniz]

I think I have identified the root cause. The element that I was targeting, their parent elements have will-change: transform; property and disabling it from the Chrome DevTools, did worked.

But there is another issue lays off, is there a way to implement a solution without removing the will-change property?
Like, clicking on an element and searching for will-change property by executing window.getComputedStyle method on parent elements recursively, will be a costly solution, speaking from the performance perspective

[daybrush]

@seahindeniz

moveable's new version is released. Check it again.

[seahindeniz]

It is working as expected 👏🏻