CSS3DObject has different position in Safari

[Dylan-Bartoli]

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!

[zadinvit]

Hi Dylan,
Did you somehow solve this problem? I have same problem and i currently working on fix and i find this thread.

[manthrax]

Can you folks verify that the “zoom” on each browser is set to 100% ?

and… Do these examples show the same issues? :

https://threejs.org/examples/?q=css#css3d_periodictable

https://threejs.org/examples/?q=css#css3d_sprites

https://threejs.org/examples/?q=css#css3d_youtube

[zadinvit]

EDIT:
Problem was with using aspect-ratio, when I remove aspect ratio, it start rendering on right position. So safari still have problem with aspect-ratio implementation.

Zoom is on both browsers 100%.

It’s hard to find the issue with these examples, because there is only css 3D part. I find it with using css3d with standard webgl canvas. I test it on more computers (still same result).

There is link for my case - https://storage.googleapis.com/demos_bucket/safariBug/index.html

There are images
chrome

Safari 17.3

Now the most strange part, when I inspect it with inspector, it showing div on right position. But it’s rendered in diffrent position.

[manthrax]

If I hover over the canvas and then the cssrenderer… they are a different width/heights.
That might be your problem. They need to be the exact same size.
edit: hmm I could be wrong… I tried forcing their sizes to be the same but it still looked wrong.
perhaps there is a problem with the resize handler?
Another thing that has bitten me in the past is sometimes a random extension will screw up the css renderer… maybe try checking without extensions etc.

[zadinvit]

It’s not had same exactly same size. But in safari it was broken, but remove aspect-ratio helped. Thanks for help.

It’s still work in progress, I just working on make it same size etc.

It’s seems that safari have some problems with aspect ratio (also I had problem on safari if I use bigger size for div than was I css3Dcanvas width, it just cut off part of div. Text have also problem with rendering (sometimes are blur), but I hope i found solution for all these problems.

[Arthur]

For more info on aspect-ratio support you can check see https://caniuse.com/?search=aspect-ratio .

I would recommend making sure that you’re using a CSS reset: to make sure that the issue isn’t simply caused by different browsers using different default stylesheets.

[manthrax]

Glad you figured out solutions to all the problems.
and yeah… now that you mention it, I recall that I had the blurry text problem too at one point, and yeah, you can fix it with larger font size, but keep an eye on performance… I think I noticed that at a certain point, using larger fonts started to slow things down too, so it’s a balancing act.