Promise never resolves when the card element is currently not visible

[jordijansen]

Hi,

In some games I use a Tab based layout that hides specific game parts using CSS:

display: none;

However, when a notification comes in that wants to animate a card (move it to a different stock) which stock or fromElement is currently hidden because of above CSS the promise hangs indefinitely. I've modified the card-stock.ts function moveFromElement and moveFromStock to include the following:

        if (cardElement.offsetParent === null) {
            console.warn('Card is not visible at the moment, skipping animation');
            promise = Promise.resolve(false);
        }

The offsetParent will be NULL if it is currently not visible due to a parent being hidden. You might want to add this to the library as well.

[jordijansen]

Source off the offsetParent fix: https://stackoverflow.com/a/21696585

[thoun]

I tried this on the demo index files and it still triggers the begin/end logs when hidden ! Can you try these modifications on the demo with your browser to know if it works? If yes, I would like to know what makes it different in your project.

[thoun]

Or maybe it's only if the cards already exists on the hidden stock? On this example it's a new card, even if it comes from the hidden deck.

[thoun]

@jordijansen I added on the main branch an example at the bottom of the Stock demo. You can add a card to stock1 and 2, and trigger hiding one of the stocks. Animation isn't perfect in that case, but at least I see no JS error and the card goes where expected.

[jordijansen]

Interesting, it seems to work in the demo. I am not sure why it isn't working in my project. I'll see if I can investigate further once I have some more time

[thoun]

Are you using the last version on your project? Maybe it's an issue I've fixed.

[jordijansen]

I'm on 3.2.0, so that shouldn't be an issue