This issue is specific to Chrome.
Here's what I have experimented with:
I am utilizing the webGL renderer to position a plane geometry in a 3D environment using threejs. This particular code is running within a class, with the scene as one of its members:
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, transparent:true, opacity:0.5, side: THREE.DoubleSide });
var planeWidth = 1080;
var planeHeight = planeWidth;
var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
var planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
this.scene.add(planeMesh);
Everything runs smoothly and without any issues.
I also include the CSS3DRenderer.js and insert an iframe element.
Within the class, there exists a separate scene meant for holding HTML elements:
// create a new scene to hold CSS
this.cssScene = new THREE.Scene();
An element is created to be used within the CSS scene:
//create the iframe to contain the html
var element = document.createElement('img');
element.src = "http://cdn.freshome.com/wp-content/uploads/2013/11/color-wheel.jpg";
var elementWidth = planeHeight;
//Use the planeMesh size
element.style.width = planeWidth + "px";
element.style.height = planeHeight + "px";
//give it a z-index so we can place it behind our webGL canvas element
element.style.zIndex = "1";
The next step involves creating the CSS3DObject to position the element accordingly:
var cssObject = new THREE.CSS3DObject( element );
The position and rotation are aligned with the planeMesh and added to the scene along with rendering options:
cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;
this.cssScene.add(cssObject);
this.rendererCSS = new THREE.CSS3DRenderer();
this.rendererCSS.setSize( (window.innerWidth), window.innerHeight);
this.rendererCSS.domElement.style.position = 'absolute';
this.rendererCSS.domElement.style.zIndex = 1;
this.rendererCSS.domElement.style.top = 0;
this.rendererCSS.domElement.style.left = 0;
this.rendererCSS.domElement.style.margin = 0;
this.rendererCSS.domElement.style.padding = 0;
this.container.appendChild(this.rendererCSS.domElement);
The outcome
While Firefox displays correctly, Chrome does not.
The difference in size also affects camera panning, causing the CSS3DObject to deviate from the planeMesh in Chrome only. Firefox pans both renderers, webGL, and CSS, perfectly in sync.
A screenshot below exemplifies the size discrepancy in Chrome when applying a wireframe to the planeMesh, showcasing that Chrome fails to fill the same space. The calculated inconsistency amounts to approximately 12-13% too small.
https://i.sstatic.net/9NiWT.jpg
The Inquiry: Do I need to apply a specific unit of measurement in Chrome to ensure consistent 3D rendering in alignment with webGL?