CODEWITHSUNDEEP
famo.us
Keith Nicholas
Keith Nicholas

Reputation: 44298

Getting a background surface into the background only partially works

I'm trying to make a Famo.us game where I have a background Image ( an ImageSurface ) and then I put a bunch of other ImageSurfaces over the top and animate them. However the background surface doesn't stay in the background, for starters new ImageSurfaces are drawn underneath, then weirdly they start getting drawn on top. Exact same code generating the surfaces.

the background image has a Transform.behind applied to it.

The image below kind of shows the problem, some of the small squares are behind, and some are on top.

If it makes any difference, the surfaces are all in a HeaderFooterLayout

Any ideas whats going wrong? or how I could debug this?

enter image description here

Upvotes: 0

Views: 53

Answers (1)

Kraig Walker
Kraig Walker

Reputation: 812

check the zIndex value of the surfaces isn't the same as the zIndex of the white surface you're attempting to hide them behind. If they are the same (or unspecified) the browser hazards a guess, and you end up with z-fighting where the GPU can't actually decide what to render (the white surface or the tabs?) You could have your tabs resting on one zIndex value, and the white surface on the other.

(The following is written by Keith) For anyone else, what I did was add the following to the ImageSurface

 properties: {              
    zIndex: -1000000
 }

Oddly I tried with a zIndex of -10 etc, which didn't work, only once I made that zIndex huge did it seem to fall behind everything else.

Upvotes: 1

Related Questions