Проблемы с позиционированием в Firefox? position: relative для элемента display: table

У меня самая странная проблема с позиционированием, которая появляется только в firefox.

Мой HTML:

Мой CSS:

html, body {
  margin: 0; padding: 0;
  height: 100%;
  width: 100%;
}

article.layer {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}

article .left, article .right {
  position:absolute;
  width: 50%;
  height: 100%;
  min-height:100%;
  display:table;
}

article .left { left: 0; top: 0; }
article .right { left: 50%; top: 0; }

Таким образом, для каждой статьи установлено значение display: table , ширина 100% и высота 100%. Тело и html тоже на 100% шириной и высотой. Поэтому каждая статья точно соответствует размеру текущего окна браузера.

Обратите внимание, что для каждого article.layer задано значение position: relative .

В последней статье два div расположены в absolute , поэтому один расположен слева, а другой - справа.

Это отлично работает во всех браузерах, кроме Firefox. В Firefox div.left и div.right из последней статьи показаны сверху и перекрывают первую статью…

Вот живая демонстрация: http: //jsbin.com/ubulot/edit#preview Протестируйте его в Firefox, и вы увидите проблему. На моем Mac установлен FF 9.0.1.

Есть идеи, что я здесь делаю не так?