CSS3DObject has different position in Safari

This is my first question on this forum. I apologize if I have made any mistakes.

I came across an issue while developing a scene using three.js with CSS3DObjects.
I noticed that the CSS3DObjects are slightly shifted in Safari, whereas they appear correctly in other browsers like Chrome and Firefox.
I replicated the problem in this simple example.

This is what it looks like on safari

And this is what it looks like on chrome

The CSS3DObject is a simple text wrapped in a div without any applied CSS styles.
In Safari the object is in the right position, but it appears slightly moved visually.

Here is the code I used to implement the cube and the CSS3DObject:

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(0.5, 0.5, 0.5),
    new THREE.MeshNormalMaterial()
cube.position.z = -2;

const div = document.createElement("div");
div.innerHTML = "test message";
const cssObj = new CSS3DObject(div);
cssObj.position.set(0, -0.25, -2);
cssObj.scale.set(0.01, 0.01, 0.01);

I also attempted to add the CSS3DObject to an Object3D, but the issue persisted.

I am using three@0.155.0 and have even tried scaling down to 0.153.0, but the problem remains.

Has anyone else encountered this problem? Do you have any ideas on how to fix it? If necessary, I can try to reproduce the issue on CodePen.

Thank you for any help!