Блог

Я пытаюсь контролировать наслоение поверхностей, используя свойство zIndex. Он отлично работает в Chrome, тогда как в Firefox этого нет. После изучения 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);
 

Вы должны стараться избегать использования свойства zIndex, потому что Famo.us индексирует Z для вас с помощью их движка 3D-рендеринга. Чтобы добиться желаемого, используйте 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);