Stylus Nib Gradients

Question

Я надеюсь, что кто-то здесь узнает ответ на эту проблему, так как это заставляет меня немного умствовать прямо сейчас.

Проблема в том, что мои градиенты будут работать только горизонтально, но не вертикально. Когда я пытаюсь сделать это сверху вниз на странице, он повторяется в полосах. См. Screenshot Я использовал Chromium, Chrome и Firefox на этом, и все они показывают одно и то же.

Я использую NPM, Gulp и Stylus, которые все работают нормально. Я попытался использовать Kouto-Swiss, но столкнулся с этой проблемой градиента, поэтому вместо этого попробовал Nib, имел те же проблемы. Я думаю, что я могу пропустить что-то очевидное, но я не вижу его. Этот маленький проект на самом деле для меня, чтобы играть с Flexbox, но эта проблема градиента нуждается в исправлении.

Вот код: All Files In This Bin

извинить разгильдяйство, его полигоном: D

Answer 1

Добавить height:100% в HTML и правила тела в вашем CSS.

html, body { 
    height:100%; 
}