Merge pull request #20028 from JohannesDeml/css3d-rendering-issues-safari

Fix orthographic camera rendering for CSS3D on safari on High DPI displays

examples/jsm/renderers/CSS3DRenderer.js

@@ -86,6 +86,7 @@ var CSS3DRenderer = function () {
 	domElement.appendChild( cameraElement );
 
 	var isIE = /Trident/i.test( navigator.userAgent );
+	var isSafari = /Safari/.test( navigator.userAgent ) && ! /Chrome/.test( navigator.userAgent );
 
 	this.getSize = function () {
 
@@ -334,8 +335,18 @@ var CSS3DRenderer = function () {
 			'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
 			'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
 
+		var cameraTranslateX = _widthHalf;
+		var cameraTranslateY = _heightHalf;
+
+		if( isSafari && camera.isOrthographicCamera ) {
+
+			cameraTranslateX = Math.round(cameraTranslateX);
+			cameraTranslateY = Math.round(cameraTranslateY);
+
+		}
+
 		var style = cameraCSSMatrix +
-			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
+			'translate(' + cameraTranslateX + 'px,' + cameraTranslateY + 'px)';
 
 		if ( cache.camera.style !== style && ! isIE ) {