手写笔笔尖渐变

Question

我希望有人能够知道这个问题的答案，因为它现在让我有点精神错乱。

问题是我的渐变只能水平工作而不能垂直工作。当我试图让它在页面上从上到下时，它会以条纹重复。见Screenshot 我在这上面使用过Chromium，Chrome和Firefox，所有这些都表现出同样的东西。

我使用NPM，Gulp和Stylus都可以正常使用。我尝试使用Kouto-Swiss但遇到了这个渐变问题，所以我尝试了Nib，遇到了同样的问题。我想我可能会遗漏一些明显但我无法看到它的东西。这个小项目实际上是让我玩Flexbox，但这个渐变问题需要修复。

这里是代码： All Files In This Bin

请原谅，这是一个试验场：D

Answer 1

将height:100%添加到CSS中的html和正文规则。

html, body {
    height:100%;
}