Why does my Famo.us animations move forward and backward unexpectedly?

Question

I have some basic Famo.us code using a Scene to define my scene graph. I'm simply trying to rotate the famous logo, but it doesn't just rotate, it also seems to move forward and backward (or shrink and grow) repeatedly.

My code is below, but before it will work, you need Famo.us v0.2.2 then add this after line 85 of famous/core/Scene.js:

        else if (transformDefinition instanceof Function) {
            transform = transformDefinition;
        }

That allows the transform property of an object literal in a Scene definition to accept a function.

Here's my code, running in a yo famous generated project, with only the modification to Scene.js this in main.js:

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Transform = require('famous/core/Transform');
    var Scene = require('famous/core/Scene');
    var Surface = require('famous/core/Surface');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    mainContext.setPerspective(1200);

    var initialTime = Date.now();

    // define the main scene.
    var mainScene = new Scene({
        id: "root",
        size: function() {
            return [window.innerWidth, window.innerHeight];
        },
        target: [

            {
                id: 'background'
            },
            {
                id: "logoSpin",
                origin: [0.5, 0.5],
                transform: function() {
                    return Transform.rotateY(.003 * (Date.now() - initialTime));
                },
                target: {
                    id: 'logoContainer',
                    size: function() {
                        return [window.innerWidth*0.8, window.innerHeight*0.8];
                    },
                    target: {id: "logo",},
                },
            },
        ],
    });

    var background = new Surface({
        properties: { backgroundColor: '#25475E'},
    });

    var logo = new Surface({
        properties: {
            backgroundImage: 'url(/content/images/famous_logo.png)',
            backgroundPosition: 'center center',
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
        },
        //content: '/content/images/famous-logo.png',
        classes: ['backfaceVisibility']
    });

    mainScene.id['logo'].add(logo);

    mainContext.add(mainScene);
});

I basically took the default famo.us rotating logo and used a Surface instead of an ImageSurface so that I can apply the image as a background image and use the backgroundSize:'contain' property to be able to always contain the logo in the view. I'm rotating the surface, but I don't see why the surface appears to go forward and backward while it spins.

Why is it doing that?

Answer 1

Apparently, nothing's wrong with my code. I've updated my system libraries (I'm in Arch Linux) it works as expected now, without having changed any code whatsoever. The code remains absolutely identical. It must be something in Chromium's rendering that got changed/fixed in the update or something?