z-translate is ignored by GridLayout view - famo.us

Question

I want to use GridLayout in ScrollView context and be able to translate surfaces of GridLayout in Z-direction. The problem is that for some reason Z-translate is ignored in GridLayout. Seems like GridLayout has zero perspective because translate in x and y directions just work. How to fix that?
Here is example where z-translate just does nothing :(
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var View = require("famous/core/View");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var GenericSync = require("famous/inputs/GenericSync");
GenericSync.register({ 'mouse': MouseSync, 'touch': TouchSync });
var syncX = new GenericSync(['mouse', 'touch'], { direction: 0 });
var GridLayout = require("famous/views/GridLayout");
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require("famous/core/Transform");
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var grid = new GridLayout({
dimensions: [6, 2]
});
var scrollview = new Scrollview({direction: 0});
syncX.pipe(scrollview);
var surfaces = [];
var mods = [];
var views = [];
for (var i = 0, temp; i < 12; i++) {
view = new View();
mod = new StateModifier();
temp = new Surface({
content: "Surface: " + (i + 1),
size: [200, 200],
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
temp.pipe(syncX);
surfaces.push(temp);
mods.push(mod);
view.add(mod).add(temp);
views.push(view);
}
grid.sequenceFrom(views);
var container = new ContainerSurface({size:[1200,400]});
container.context.setPerspective(1000); ///<----------
container.add(grid);
scrollview.sequenceFrom([container]);
Engine.on('click', function(){
mods[0].setTransform(Transform.translate(2,2,999), {duration:1000});
});
mainContext.add(scrollview);
});
BTW I did test it in Chrome

Answer 1

The GridLayout should not ignore the z-translate as you can see if you run the code below. There are some things missing and extra pieces you do not need in the code you supplied above.
Note: Putting a modifier on the view in the GridLayout the way you are using it may not end up giving you the desired result you want, but the example does show how it works.
Example jsBin
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var View = require("famous/core/View");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var GridLayout = require("famous/views/GridLayout");
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require("famous/core/Transform");
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var grid = new GridLayout({
dimensions: [6, 2]
});
var scrollview = new Scrollview({direction: 0});
var surfaces = [];
var mods = [];
var views = [];
for (var i = 0; i < 12; i++) {
var view = new View();
var mod = new StateModifier({
size: [200, 200],
transform: Transform.translate(0,0,0.001)
});
var temp = new Surface({
content: "Surface: " + (i + 1),
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surfaces.push(temp);
mods.push(mod);
temp.pipe(view);
view.add(mod).add(temp);
views.push(view);
temp.on('click', translateOut.bind(temp, i));
}
grid.sequenceFrom(views);
var container = new ContainerSurface({size:[1200,400]});
container.add(grid);
grid.pipe(container);
scrollview.sequenceFrom([container]);
container.pipe(scrollview);
function translateOut(index){
if (!this.moved) {
mods[index].setTransform(Transform.translate(0,0,400), {duration:1000});
} else {
mods[index].setTransform(Transform.translate(0, 0,0.001), {duration:1000});
}
this.moved =!this.moved;
}
mainContext.add(scrollview);

Answer 2

This is due to a newly introduced chrome bug. It looks like Chrome tries to fast path some of its rendering when everything is initially at a z translation of 0. If you add a Surface to the scene at a no zero z with an opacity of 0 you can trick Chrome into drawing correctly.
mainContext
.add(new StateModifier({
transform: Transform.translate(0, 0, 100000000),
size: [1, 1],
opacity: 0
})).add(new Surface({
properties: {backgroundColor: 'chromeHack'}
}));
I will edit this post when I make a simpler example and file as a chrome bug.