Javascript famo.us Firefox设置z-index不';行不通
我试图使用zIndex属性控制曲面的分层。它在Chrome中运行良好,而在Firefox中则没有。在检查DOM之后,我发现无论我们设置什么,z索引都被标记为0 我在famo.us教程代码中重现了这个问题。将教程代码替换为以下代码。请注意Chrome和Firefox之间代码相同的区别Javascript famo.us Firefox设置z-index不';行不通,javascript,css,firefox,z-index,famo.us,Javascript,Css,Firefox,Z Index,Famo.us,我试图使用zIndex属性控制曲面的分层。它在Chrome中运行良好,而在Firefox中则没有。在检查DOM之后,我发现无论我们设置什么,z索引都被标记为0 我在famo.us教程代码中重现了这个问题。将教程代码替换为以下代码。请注意Chrome和Firefox之间代码相同的区别 var Engine = require('famous/core/Engine'); var Surface = require('famous/core/Surface'); var mainContext =
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);
您应该尽量避免使用zIndex属性,因为Famo.us使用其3D渲染引擎为您创建Z索引。若要实现所需,请使用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);
谢谢你,约翰特拉弗。我会记住这一点。我使用translateZ进行了测试,结果很有效。然而,我继续努力,试图弄明白为什么z指数不起作用。将
Surface
中的代码更改如下,修复了原始问题:element.style.zIndex=(矩阵[14]*1000000)| 0;//修复Firefox z缓冲区问题
New:element.style['z-index']=(矩阵[14]*1000000)| 0;//Firefox z-buffer问题修复
更改这一行后,我可以看到DOM上的z-index值反映了代码中提供的值。此外,曲面在屏幕上以正确的z顺序渲染。酷!很高兴你明白了!由于Firefox中的一个bug已经在v30.0中修复,所以这些代码是很有名的。以前Firefox不遵守嵌套的translateZ,所以我们需要强制执行zIndexing以获得适当的分层。我们将在Famo.us端删除此项,等待Firefox 30的采用率。