[英]famo.us Firefox setting z-index doesn't work
I am trying to control the layering of surfaces using zIndex property. 我正在尝试使用zIndex属性控制表面的分层。 It works just fine in Chrome whereas it doesn't in Firefox.
它在Chrome中正常运行,而在Firefox中则无法正常运行。 After examining the DOM, I observed that the z-index is marked as 0 no matter what we set.
在检查了DOM之后,我发现无论我们设置什么,z-index都标记为0。
I reproduced the problem in famo.us tutorial code @ http://famo.us/university/famous-101/displaying/5/ . 我在famo.us教程代码@ http://famo.us/university/famous-101/displaying/5/中重现了该问题。 Replace the tutorial code with the following code.
用以下代码替换教程代码。 Notice the difference between Chrome and Firefox with the same code.
注意使用相同代码的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);
You should try to avoid using the zIndex property, because Famo.us does Z indexing for you with their 3D render Engine. 您应该尝试避免使用zIndex属性,因为Famo.us会使用其3D渲染引擎为您进行Z索引编制。 To achieve what you wish, use a StateModifier and translate your surfaces in the Z direction.
要实现您想要的效果,请使用StateModifier并在Z方向上平移曲面。
This now works in FireFox as well. 现在,它也可以在FireFox中使用。 Hope it helps!
希望能帮助到你!
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.