{"action":"created","issue":{"url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/45","labels_url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/45/labels{/name}","comments_url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/45/comments","events_url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/45/events","html_url":"https://github.com/IjzerenHein/famous-flex/issues/45","id":55708754,"number":45,"title":"Multiple surfaces in FlexScrollView items sporadically change Z order","user":{"login":"peacechen","id":6295083,"avatar_url":"https://avatars.githubusercontent.com/u/6295083?v=3","gravatar_id":"","url":"https://api.github.com/users/peacechen","html_url":"https://github.com/peacechen","followers_url":"https://api.github.com/users/peacechen/followers","following_url":"https://api.github.com/users/peacechen/following{/other_user}","gists_url":"https://api.github.com/users/peacechen/gists{/gist_id}","starred_url":"https://api.github.com/users/peacechen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peacechen/subscriptions","organizations_url":"https://api.github.com/users/peacechen/orgs","repos_url":"https://api.github.com/users/peacechen/repos","events_url":"https://api.github.com/users/peacechen/events{/privacy}","received_events_url":"https://api.github.com/users/peacechen/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/IjzerenHein/famous-flex/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-01-28T03:14:00Z","updated_at":"2015-01-29T04:19:25Z","closed_at":null,"body":"When the items in a FlexScrollView consist of multiple surfaces, scrolling them in and out of view causes their surfaces' Z order to change seemingly randomly.  I observed this bug in Famo.us's stock Scrollview in their version 0.3.2.  It's been fixed in 0.3.4 so perhaps that may offer some insight into this issue.\r\n\r\nThis self-contained code recreates it.  The red box should be on top, the blue box just below it, and the red & green bars behind them both.  Scroll all the way down, then all the way up. The red / blue boxes in some of the items drop below the other surfaces.\r\n\r\n    define(function(require, exports, module) {\r\n        var Engine             = require('famous/core/Engine');\r\n        var AppView            = require('views/AppView');\r\n        var Surface            = require('famous/core/Surface');\r\n        var ImageSurface       = require('famous/surfaces/ImageSurface');\r\n        var StateModifier      = require('famous/modifiers/StateModifier');\r\n        var RenderNode         = require('famous/core/RenderNode');\r\n        var Transform          = require('famous/core/Transform');\r\n        var FlexScrollView     = require('famous-flex/FlexScrollView');\r\n        \r\n        var mainContext = Engine.createContext();\r\n        mainContext.setPerspective(1000);\r\n        mainContext.setSize([300, 500]);\r\n\r\n        this.scrollview = new FlexScrollView({\r\n            // paginated: true,\r\n            // mouseMove: true,\r\n            layoutOptions: {\r\n                //margins: [10, 5, 0, 15], \r\n                spacing: 2\r\n            }\r\n        });\r\n        mainContext.add(this.scrollview);\r\n\r\n        this.items = [];\r\n        this.scrollview.sequenceFrom(this.items);\r\n        this.size = [mainContext.getSize()[0], 200]\r\n\r\n        for (var i=0; i<6; i++) {\r\n            var itemModifier = new StateModifier({ size: this.size});\r\n            var itemNode = new RenderNode(itemModifier);\r\n\r\n            var background = new ImageSurface({\r\n                size: this.size,\r\n                properties: {\r\n                    backgroundColor: 'grey'\r\n                },\r\n                content: \"https://famo.us/blog/wp-content/uploads/2014/12/19b.jpg\"\r\n            });\r\n            background.pipe(this.scrollview);\r\n            itemNode.add(background);\r\n\r\n            var surface1 = new Surface({\r\n                size: [this.size[0], 20],\r\n                properties: {\r\n                    backgroundColor: 'yellow'\r\n                }\r\n            });\r\n            surface1.pipe(this.scrollview);\r\n            itemNode.add(surface1);\r\n\r\n            var surface2 = new Surface({\r\n                size: [this.size[0], 40],\r\n                properties: {\r\n                    backgroundColor: 'green'\r\n                }\r\n            });\r\n            surface2.state = new StateModifier({\r\n                origin: [0, 1],\r\n                align: [0, 1]\r\n            });\r\n            surface2.pipe(this.scrollview);\r\n            itemNode.add(surface2.state).add(surface2);\r\n\r\n            var surface3 = new Surface({\r\n                size: [this.size[0]*0.5, this.size[1]*0.75],\r\n                properties: {\r\n                    backgroundColor: 'blue'\r\n                }\r\n            });\r\n            surface3.state = new StateModifier({\r\n                origin: [0.5, 0],\r\n                align: [0.5, 0.2]\r\n            });\r\n            surface3.pipe(this.scrollview);\r\n            itemNode.add(surface3.state).add(surface3);\r\n\r\n            var surface4 = new Surface({\r\n                size: [this.size[0]*0.3, this.size[1]*0.3],\r\n                properties: {\r\n                    backgroundColor: 'red'\r\n                }\r\n            });\r\n            surface4.state = new StateModifier({\r\n                origin: [0.5, 0],\r\n                align: [0.5, 0.04]\r\n            });\r\n            surface4.pipe(this.scrollview);\r\n            itemNode.add(surface4.state).add(surface4);\r\n\r\n\r\n            this.items.push(itemNode);\r\n        }\r\n\r\n    });\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/comments/71966925","html_url":"https://github.com/IjzerenHein/famous-flex/issues/45#issuecomment-71966925","issue_url":"https://api.github.com/repos/IjzerenHein/famous-flex/issues/45","id":71966925,"user":{"login":"peacechen","id":6295083,"avatar_url":"https://avatars.githubusercontent.com/u/6295083?v=3","gravatar_id":"","url":"https://api.github.com/users/peacechen","html_url":"https://github.com/peacechen","followers_url":"https://api.github.com/users/peacechen/followers","following_url":"https://api.github.com/users/peacechen/following{/other_user}","gists_url":"https://api.github.com/users/peacechen/gists{/gist_id}","starred_url":"https://api.github.com/users/peacechen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peacechen/subscriptions","organizations_url":"https://api.github.com/users/peacechen/orgs","repos_url":"https://api.github.com/users/peacechen/repos","events_url":"https://api.github.com/users/peacechen/events{/privacy}","received_events_url":"https://api.github.com/users/peacechen/received_events","type":"User","site_admin":false},"created_at":"2015-01-29T04:19:25Z","updated_at":"2015-01-29T04:19:25Z","body":"I used a loop to add 100 surfaces, incrementally offsetting the align/origin slightly so I could see all of them. The native ScrollView manages to keep the order properly when scrolling all around.\r\n\r\nNot surprisingly, the performance slowed a bit on the native ScrollView. It slowed a lot with the FlexScrollView.  Rough guesstimate 20 fps vs 5 fps.\r\n\r\nI tried to work around this issue in FlexScrollView by using Transform.translate with small increments of Z.  This manages to work for the scrolling. However when the FlexScrollView is moved in 3D space (translate and transform), surfaces randomly disappear."}}