html - 手写笔 Nib 渐变

Question

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

问题是我的渐变只会在水平方向上起作用，而在垂直方向上不起作用。当我试图让它在页面上从上到下移动时，它以条纹重复。参见 Screenshot 我在这上面使用了 Chromium、Chrome 和 Firefox，它们都显示相同的东西。

我正在使用 NPM、Gulp 和 Stylus，它们都运行良好。我尝试使用 Kouto-Swiss，但遇到了这个梯度问题，所以我尝试使用 Nib，但遇到了同样的问题。我想我可能遗漏了一些明显的东西，但我看不到。这个小元素实际上是给我玩 Flexbox 的，但是这个梯度问题需要解决。

代码如下: All Files In This Bin

请原谅我的草率，它是一个试验场 :D

Answer 1

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

html, body {
    height:100%;
}