Flickering on IOS

[Ja]

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:

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.