CSS3 Transform начинает работать после изменения размера окна Mozilla

Question

Я пишу чистую веб-страницу CSS3 parallax, следуя методу Keith Clark's и образцу, сделанному Карлом Хендерсоном (не может связывать его кодировку из-за отсутствия репутации). Это код на главной странице, мой JSFiddle и Carl's Codepen.

index.html

<div class="plax_layer plax_layer--back"> 
    <p>Back Layer</p> 
    </div> 

    <div class="plax_layer plax_layer--base"> 
     <p>Base Layer</p> 
    </div> 

    <div class="plax_layer plax_layer--deep"> 
     <p>Deep Layer</p> 
    </div> 

</div> 

main.css

html, body { 
    height: 100%; 
    overflow: hidden; 
} 
.parallax { 
    top: 0; 
    -webkit-perspective: 1px; 
    -moz-perspective: 1px; 
    -ms-perspective: 1px; 
    perspective: 1px; 
    height: 100vh; 
    overflow-x: hidden; 
} 
.plax_layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    font-size: 200%; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d;  
} 
.plax_layer--base { 
    -webkit-transform: translatez(0) scale(1); 
    -moz-transform: translatez(0) scale(1); 
    -ms-transform: translatez(0) scale(1); 
    -o-transform: translatez(0) scale(1); 
    transform: translatez(0) scale(1); 
    border: 2px solid red; 
} 

.plax_layer--back { 
    -webkit-transform: translatez(-1px) scale(2); 
    -moz-transform: translatez(-1px) scale(2); 
    -ms-transform: translatez(-1px) scale(2); 
    -o-transform: translatez(-1px) scale(2); 
    transform: translatez(-1px) scale(2); 
    border: 2px solid blue; 
} 
.plax_layer--deep { 
    -webkit-transform: translatez(-2px) scale(3); 
    -moz-transform: translatez(-2px) scale(3); 
    -ms-transform: translatez(-2px) scale(3); 
    -o-transform: translatez(-2px) scale(3); 
    transform: translatez(-2px) scale(3); 
    border: 2px solid green; 
} 
p { 
    position: absolute; 
} 

Проблема У меня есть код прекрасно работает на Chrome и Safari, но Mozilla полностью не удается дайте эффект, не открывая окно Inspector (останавливается после закрытия указанного окна) и работает только в моей Fiddle после того, как я изменил размер окна вывода. Я не сталкивался с подобными проблемами (возможно, еще) в google.

Answer 1

Я смог исправить, добавив margin: 0 к корпусу.

Проверьте здесь: http://codepen.io/lonekorean/pen/0e625cea8f2da7e046ea2b3b9a33c9cc.