famo.us Firefox 설정 Z- 인덱스가 작동하지 않습니다.

Question

zIndex 속성을 사용하여 서페이스의 레이어를 제어하려고합니다. Firefox에서는 작동하지 않지만 Chrome에서는 정상적으로 작동합니다. DOM을 조사한 결과 z-index는 우리가 설정 한 것과 상관없이 0으로 표시된다는 것을 알았습니다.

famo.us 튜토리얼 코드 @http://famo.us/university/famous-101/displaying/5/에서 문제가 재현되었습니다. 자습서 코드를 다음 코드로 바꿉니다. 같은 코드를 사용하는 Chrome과 Firefox의 차이점을 확인하십시오.

var Engine = require('famous/core/Engine'); 
var Surface = require('famous/core/Surface'); 

var mainContext = Engine.createContext(); 

var firstSurface = new Surface({ 
    size: [200, 400], 
    content: 'top', 
    properties: { 
    color: 'white', 
    textAlign: 'center', 
    backgroundColor: '#FA5C4F', 
    zIndex: 10 
    } 
}); 

var secondSurface = new Surface({ 
    size: [300, 200], 
    content: 'bottom', 
    properties: { 
    color: 'white', 
    textAlign: 'center', 
    backgroundColor: 'green', 
    zIndex: 8 
    } 
}); 

mainContext.add(firstSurface); 
mainContext.add(secondSurface); 

Answer 1

Famo.us가 3D 렌더링 엔진으로 Z 인덱싱을 수행하기 때문에 zIndex 속성을 사용하지 마십시오. 원하는 것을 얻으려면 StateModifier를 사용하고 Z 방향에서 서페이스를 평행 이동합니다.

이제 FireFox에서도 작동합니다. 희망이 도움이됩니다!

var Engine = require('famous/core/Engine'); 
var Surface = require('famous/core/Surface'); 
var Transform = require('famous/core/Transform'); 
var StateModifier = require('famous/modifiers/StateModifier'); 

var mainContext = Engine.createContext(); 

var firstSurface = new Surface({ 
    size: [200, 400], 
    content: 'top', 
    properties: { 
    color: 'white', 
    textAlign: 'center', 
    backgroundColor: '#FA5C4F' 
    } 
}); 

firstSurface.state = new StateModifier({ 
    transform: Transform.translate(0,0,10) 
}); 

var secondSurface = new Surface({ 
    size: [300, 200], 
    content: 'bottom', 
    properties: { 
    color: 'white', 
    textAlign: 'center', 
    backgroundColor: 'green', 
    } 
}); 

secondSurface.state = new StateModifier({ 
    transform:Transform.translate(0,0,8) 
}); 

mainContext.add(firstSurface.state).add(firstSurface); 
mainContext.add(secondSurface.state).add(secondSurface);