Fixing DomElement position when camera zoom != 1

[moufmouf]

This PR (delete as applicable)

• Fixes a bug

Describe the changes below:

When the camera zoom is set to any other value than one, if a dom element origin if set to anything other than 0, the final position of the DOM was incorrect.

The complete bug is described in #6817.

I traced this back to the DOMElementCSSRenderer. After some trial and error, I realized the translation needed to be applied after camera multiplication and not at the beginning.

With this change, DOMElements are correctly positioned.

This closes #6817 and https://github.com/workadventure/workadventure/issues/3936 (where you can see a video of the issue in action)

Note: I very much suspect the same error happens in the "if" clause, if a parent matrix is set. However, I don't know how to test this. Any help is welcome to help me test this out.

[moufmouf]

Note: this also fixes those issues:

• https://github.com/phaserjs/phaser/issues/6607
• https://phaser.discourse.group/t/dom-elements-get-out-of-place-when-using-zoom/13527
• https://phaser.discourse.group/t/dom-element-and-camera-zoom/11662/5

[moufmouf]

Note: I very much suspect the same error happens in the "if" clause, if a parent matrix is set. However, I don't know how to test this. Any help is welcome to help me test this out.

With the advice of @rexrainbow I was able to test the case where the parent matrix is set by adding the DOMElement inside a container. Hopefully, this case was already working correctly so does not need a fix. See https://phaser.io/sandbox/FRfpYx4G

So this PR is ready to merge! :+1:

[HugoAverty]

Would it be possible to merge this PR? I'm super interested and other issues have come up on this subject. @zekeatchan / @photonstorm