Threejs: Large images not displaying correctly - three.js

Question

I am trying to create a simple image sequence using Three js and CSS3D Renderer. To create this sequence, I am referring to the CSS3D Renderer example http://www.mrdoob.com/lab/javascript/threejs/css3d/periodictable/ by mrdoob. However instead of using Divs with background color and random opacity, I am using large HD images and stacking them all in same line.
I have been able to achieve this with help of above mentioned example and can be checked here http://gauravsingh.name/webgl/
This is the JavaScript code I am using to create demo
var table = [
"img/1.jpg", "This is a test heading", "", 1, 1,
"img/2.jpg", "This is a test heading -1", "", 2, 1,
"img/3.jpg", "", "", 3, 1,
"img/4.png", "", "", 4, 1,
"img/5.jpg", "", "", 5, 1,
"img/6.jpg", "", "", 6, 1,
"img/7.jpg", "This is a test heading - 2", "", 7, 1];
var camera, scene, renderer;
var controls;
var objects = [];
var targets = {
table: []
};
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.z = 2000;
scene = new THREE.Scene();
// table
for (var i = 0; i < table.length; i += 5) {
var element = document.createElement('div');
element.className = 'element';
element.style.background = 'url("' + table[i] + '")';
var object = new THREE.CSS3DObject(element);
scene.add(object);
objects.push(object);
var object = new THREE.Object3D();
object.position.x = (table[i + 3] * 1700) - 4540;
object.position.y = -(table[i + 4] * 200) + 300;
targets.table.push(object);
}
//
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
//
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.addEventListener('change', render);
transform(targets.table, 5000);
//
window.addEventListener('resize', onWindowResize, false);
}
function transform(targets, duration) {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to({
x: target.position.x,
y: target.position.y,
z: target.position.z
}, /*Math.random() * duration */ + duration)
.easing(TWEEN.Easing.Linear.None)
.start();
new TWEEN.Tween(object.rotation)
.to({
x: target.rotation.x,
y: target.rotation.y,
z: target.rotation.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
function render() {
renderer.render(scene, camera);
}
Here is the CSS:
html, body {
height: 100%;
}
body {
background-color: #000000;
margin: 0;
font-family: Arial;
overflow: hidden;
}
.element {
width: 1600px;
height: 1280px;
box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.5);
border: 1px solid rgba(127, 255, 255, 0.25);
cursor: default;
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 0%, black 400%);
}
Problem: I have included 7 images(1600x1280px) in the code and they are present in the DOM but when the page first loads the images on the left hand part of the screen get chopped of. Trying zoom-in and tilt to see the chopped images. Also sometimes you will notice that the reflection of the extreme left image is very sharp compared to all other images.
This is strange behavior because as per my understanding I should have been able to see all images in view. I have tried playing around with camera properties to resolve this problem but no luck till now.
I will be grateful if anyone can explain me reason for this behavior and guide me to correct pointers to solve it.
Update
This problem seems to be chrome specific as I found it working well on firefox and IE. Although on firefox animations are little jerky but frames are not getting chopped.