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;
scene.add(cube);
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);
scene.add(cssObj);
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!