CSS2DRenderer: Round values used for translation. (#21416)

* Fixes #21415

* Built the modules for #21415

* Added check for Safari before using changed code

Author: simondate

examples/js/renderers/CSS2DRenderer.js

@@ -93,7 +93,13 @@ THREE.CSS2DRenderer = function () {
 
 			var element = object.element;
 
-			element.style.transform = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
+			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)';
+			}
+
 			element.style.display = ( object.visible && vector.z >= - 1 && vector.z <= 1 ) ? '' : 'none';
 
 			var objectData = {

examples/jsm/renderers/CSS2DRenderer.js

@@ -99,7 +99,13 @@ var CSS2DRenderer = function () {
 
 			var element = object.element;
 
-			element.style.transform = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
+			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)';
+			}
+
 			element.style.display = ( object.visible && vector.z >= - 1 && vector.z <= 1 ) ? '' : 'none';
 
 			var objectData = {