how to fix scrollviews height when transitioning them

Question

I recently started to play with Famo.us framework, and trying to build a simple HeaderFooterLayout for switching between different Scrollviews.

The issue I have is when page is loading we can see the Scrollview pass in front of the bottom TabBar.

Another strange thing is that this issue occur once two.

In fact it's not really a TabBar widget but a GridLayout where I push Surfaces which will act as buttons.

I know with Famo.us the order in which you instantiate your Surfaces can affect z-index but I've already verify this point.

I surely misunderstand something with the RenderTree usage but I can't figure out what.

Here's my code :

define(function(require, exports, module) {
    var Engine             = require("famous/core/Engine");
    var RenderNode         = require('famous/core/RenderNode');
    var Surface            = require("famous/core/Surface");
    var ViewSequence       = require("famous/core/ViewSequence");
    var StateModifier      = require('famous/modifiers/StateModifier');
    var Utility            = require("famous/utilities/Utility");
    var EdgeSwapper        = require("famous/views/EdgeSwapper");
    var GridLayout         = require("famous/views/GridLayout");
    var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
    var Scrollview         = require("famous/views/Scrollview");
    var NavigationBar      = require("famous/widgets/NavigationBar");
    var TabBar             = require("famous/widgets/TabBar");
    var ToggleButton       = require("famous/widgets/ToggleButton");

    var mainContext = Engine.createContext();

    var layout = new HeaderFooterLayout({ headerSize: 50, footerSize: 50 });
    var edgeswapper = new EdgeSwapper({
        options: {
            size: [undefined, window.innerHeight - 100]
        }
    });

    var homeScrollview = new Scrollview();
    var bookmarksScrollview = new Scrollview();
    var messagesScrollview = new Scrollview();
    var profileScrollview = new Scrollview();

    var homeScrollviewSurfaces = [];
    homeScrollview.sequenceFrom(homeScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(homeScrollview);
        homeScrollviewSurfaces.push(temp);
    }

    var bookmarksScrollviewSurfaces = [];
    bookmarksScrollview.sequenceFrom(bookmarksScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(bookmarksScrollview);
        bookmarksScrollviewSurfaces.push(temp);
    }

    var messagesScrollviewSurfaces = [];
    messagesScrollview.sequenceFrom(messagesScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(messagesScrollview);
        messagesScrollviewSurfaces.push(temp);
    }

    var profileScrollviewSurfaces = [];
    profileScrollview.sequenceFrom(profileScrollviewSurfaces);

    for (var i = 0, temp; i < 50; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 50],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "50px",
                 textAlign: "center"
             }
        });
        temp.pipe(profileScrollview);
        profileScrollviewSurfaces.push(temp);
    }

    var navigationBar = new NavigationBar({
        size: [undefined, layout.headerSize],
        backClasses: ["back"],
        backContent: "",
        classes: ["navbar"],
        content: 'NavigationBar',
        moreClasses: ["more"],
        moreContent: ""
    });

    var tabBar = new GridLayout({
        dimensions: [4, 1],
        cellSize: [undefined, 50],
        transition: false
    });

    var homeButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-leaf"></div>'+
                '</span>'+
                '<span class="tabbar-title">Home</span>'
    });
    var bookmarksButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-heart"></div>'+
                '</span>'+
                '<span class="tabbar-title">Bookmarks</span>'
    });
    var messagesButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-envelope"></div>'+
                '</span>'+
                '<span class="tabbar-title">Messages</span>'
    });
    var profileButton = new Surface({
        size: [undefined, 50],
        content: '<span class="tabbar-icon">'+
                    '<div class="glyphicon glyphicon-user"></div>'+
                '</span>'+
                '<span class="tabbar-title">Profile</span>'
    });

    tabBar.sequenceFrom([
        homeButton,
        bookmarksButton,
        messagesButton,
        profileButton
    ]);

    layout.content.add(edgeswapper);
    layout.header.add(navigationBar);
    layout.footer.add(tabBar);

    edgeswapper.show(homeScrollview);

    homeButton.on("click", function() { edgeswapper.show(homeScrollview); });
    bookmarksButton.on("click", function() { edgeswapper.show(bookmarksScrollview); });
    messagesButton.on("click", function() { edgeswapper.show(messagesScrollview); });
    profileButton.on("click", function() { edgeswapper.show(profileScrollview); });

    mainContext.add(layout);
});

Answer 1

What was happening is that for the other scrollviews that weren't shown, the DOM elements associated with their Surfaces had not yet been created but the tab bar's had. When you then showed the other Scrollviews, new DOM elements are created and by default in DOM, when DOM elements have the same CSS zIndex and the same z-transform, newer DOM elements are layered on top. To combat this, try adding a modifier to your tab bar to explicitly transform the footer forwards in Z space.

Try this:

layout.footer.add(new Modifier({
    transform: Transform.translate(0, 0, 1)
})).add(tabBar);

Using default DOM layering gets really hairy so it is generally useful to understand how and when to explicitly do layering with z translations or css zIndex.