Flickering on IOS

whenever i animate a rotation using the Spring modifier, It causes a wierd flickering that i cant get rid of. The problem doesnt seem to occur on my computer. I am on a microsoft surface 3 pro. I am using a iphone5 as my mobile. Below is a code snippet of my issue:

``` javascript
var DOMElement = require('famous/dom-renderables/DOMElement');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var FamousEngine = require('famous/core/FamousEngine');

var physics = require('famous/physics');
var math = require('famous/math');
var Box = physics.Box;
var Spring = physics.Spring;
var RotationalSpring = physics.RotationalSpring;
var RotationalDrag = physics.RotationalDrag;
var Quaternion = math.Quaternion;
var Vec3 = math.Vec3;

function Pager (node, options) {
this.node = node;
this.currentIndex = 0;
this.pageWidth = 0;

var resizeComponent = {
onSizeChange: function(x, y, z) {
this.defineWidth(x,y);
}.bind(this)
};
this.node.addComponent(resizeComponent);

// Add a physics simulation and update this instance
// using regular time updates from the clock.
this.simulation = new PhysicsEngine();

// .requestUpdate will call the .onUpdate method next frame, passing in the time stamp for that frame
FamousEngine.requestUpdate(this);

this.pages = _createPages.call(this, node, options.pageData);
}

Pager.prototype.defineWidth = function(width, height){
this.pageWidth = width; this.pageHeight = height;
};

Pager.prototype.onUpdate = function(time) {
this.simulation.update(time)

var page;
var physicsTransform;
var p;
var r;
for (var i = 0, len = this.pages.length; i < len; i++) {
page = this.pages[i];

// Get the transform from the `Box` body
physicsTransform = this.simulation.getTransform(page.box);
p = physicsTransform.position;
r = physicsTransform.rotation;

// Set the `imageNode`'s x-position to the `Box` body's x-position
page.node.setPosition(p[0] * this.pageWidth, p[1] * this.pageHeight, 0);

// Set the `imageNode`'s rotation to match the `Box` body's rotation
page.node.setRotation(r[0], r[1], r[2], r[3]);
}

FamousEngine.requestUpdateOnNextTick(this);
};

Pager.prototype.pageChange = function(oldIndex, newIndex) {
if (oldIndex < newIndex) {
this.pages[oldIndex].anchor.set(-1, 0, 0);
this.pages[oldIndex].quaternion.fromEuler(0, Math.PI/2, 0); //this seems to be causing the problem
this.pages[newIndex].anchor.set(0, 0, 0);
this.pages[newIndex].quaternion.set(1, 0, 0, 0);
} else {
this.pages[oldIndex].anchor.set(1, 0, 0);
this.pages[oldIndex].quaternion.fromEuler(0, -Math.PI/2, 0); //this seems to be causing the problem
this.pages[newIndex].anchor.set(0, 0, 0);
this.pages[newIndex].quaternion.set(1, 0, 0, 0);
}
this.currentIndex = newIndex;
};
//Jamel's Additions
var GestureHandler = require('famous/components/GestureHandler');
var Position = require('famous/components/Position');
function _createPages(root, pageData) {
var pages = [];

for (var i = 0; i < pageData.length; i++) {
var containerNode = root.addChild();
var imageNode = containerNode.addChild();
var backNode = containerNode.addChild();
var inputNode = containerNode.addChild();
//Jamel's Additions
var gestures = new GestureHandler(containerNode);
var resizeComponent ;
(function(i){
gestures.on('drag', function callback(e) {
// console.log(e.centerDelta.y);
if(e.centerDelta.x < -25 )
pages[i].quaternion.fromEuler(0, -Math.PI, 0);
else if (e.centerDelta.x > 25 )
pages[i].quaternion.set(1, 0, 0, 0);
else if (e.centerDelta.y < -25 ){
console.log("we are swiping up", pages[i].anchor)
pages[i].anchor.set(0,-0.8,0);
pages[i].inputPos.set(0,700,0, {duration: 200})
pages[i].input.setProperty("opacity",1)
}
else if (e.centerDelta.y > 25 ){
console.log("we are swiping up", pages[i].anchor)
pages[i].anchor.set(0,0,0);
pages[i].inputPos.set(0,0,0, {duration: 200})
pages[i].input.setProperty("opacity",0)
}
});

}(i))
containerNode.setSizeMode('absolute', 'absolute')
containerNode.setAbsoluteSize(500, 800, 0);
containerNode.setAlign(0.5, 0.5);
containerNode.setMountPoint(0.5, 0.5);
containerNode.setOrigin(0.5, 0.5);

// imageNode.setSizeMode(1,1,1)
imageNode.setProportionalSize(1, 1)
.setDifferentialSize(0, 0);
imageNode.setAlign(0.5, 0.5);
imageNode.setMountPoint(0.5, 0.5);
imageNode.setOrigin(0.5, 0.5);

// backNode.setSizeMode(1,1,1)
backNode.setProportionalSize(1, 1)
.setDifferentialSize(0, 0);
backNode.setAlign(0.5, 0.5);
backNode.setMountPoint(0.5, 0.5);
backNode.setOrigin(0.5, 0.5);
backNode.setRotation(0,Math.PI,0);
backNode.setPosition(0,0,-5)

inputNode.setProportionalSize(1, 0)
.setDifferentialSize(0, 25);
inputNode.setAlign(0.5, 0.5);
inputNode.setMountPoint(0.5, 0.5);
inputNode.setOrigin(0.5, 0.5);
// inputNode.setPosition(0,0,-20);
var inputPos = new Position(inputNode);

var input = new DOMElement(inputNode, { tagName: "input" });
input.setProperty("opacity",0);
var cont = new DOMElement(containerNode);
cont.setProperty("backface-visibility","visible")
var el = new DOMElement(imageNode);
el.setProperty('backgroundImage', 'url(' + pageData[i] + ')');
el.setProperty('background-repeat', 'no-repeat');
el.setProperty('background-size', 'cover');

var back = new DOMElement(backNode);
back.setProperty('backgroundImage', 'url(' + pageData[i] + ')');
back.setProperty('background-repeat', 'no-repeat');
back.setProperty('background-size', 'cover');

// A `Box` body to relay simulation data back to the visual element
var box = new Box({
mass: 100,
size: [100,100,100]
});

// Place all anchors off the screen, except for the
// anchor belonging to the first image node
var anchor = i === 0 ? new Vec3(0, 0, 0) : new Vec3(1, 0, 0);

// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, box, {
period: 0.6,
dampingRatio: 0.5,
anchor: anchor
});

// Rotate the image 90deg about the y-axis,
// except for first image node
var quaternion = i === 0 ? new Quaternion() : new Quaternion().fromEuler(0,-Math.PI/2,0);

// Attach an anchor orientation to the `Box` body with a `RotationalSpring` torque
var rotationalSpring = new RotationalSpring(null, box, {
period: 1,
dampingRatio: 0.6,
anchor: quaternion
});

// Notify the physics engine to track the box and the springs
this.simulation.add(box, spring, rotationalSpring);

pages.push({
node: containerNode,
el: el,
box: box,
inputPos: inputPos,
input: input,
spring: spring,
quaternion: quaternion,
rotationalSpring: rotationalSpring,
anchor: anchor
});
}

return pages;
}

module.exports = Pager;
```

I modified the carousel demo to get assimilated to the famo.us engine. any help would be great.