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 firstname.lastname@example.org 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!