`.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/

https://user-images.githubusercontent.com/5789670/182551081-398558c2-f5aa-4fc9-b0fa-36e9c98e6ad1.mp4

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

https://user-images.githubusercontent.com/5789670/182564232-52b70d30-3094-4120-afe1-990839faf4fe.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 👏🏻