CSS2DRenderer: Round values used for translation.

[simondate]

Related issue: Fixed #21415

Description

Uses Math.round to set only whole numbers for values being used by CSS2DRenderer

[Mugen87]

Do you mind running node utils/modularize.js from the project's root directory to generate the ES6 module of CSS3DRenderer?

[Mugen87]

That looks right. You should see with git that examples/jsm/renderers/CSS2DRenderer.js has changed.

[simondate]

@Mugen87 sorry forgot to push!

[Mugen87]

Even if this PR fixes your problem, it would be good if you could report it to WebKit: https://bugs.webkit.org/

If WebKit would fix the issue, this change would not be required and could be reverted.

[mrdoob]

@elalish I think you're one of the few users of CSS2DRenderer. Do you know if this change will be noticeable?

[mrdoob]

Considering this only affects Safari I think it'd be better to do this:

if ( /apple/i.test( navigator.vendor ) ) {

	// https://github.com/mrdoob/three.js/issues/21415
	element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - vector.y * _heightHalf + _heightHalf ) + 'px)';

} else {

	element.style.transform = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';

}

[Mugen87]

@simondate Do you mind updating the PR with @mrdoob's suggestion?

[Mugen87]

Now it depends whether we want to risk this change or not, see #21415 (comment).

[mrdoob]

I don't see much risk... Labels movement won't be as smooth in Safari but that's it I think.