css - CSS重复线性渐变不显示小于4px的行

Question

在 Firefox/Safari 中面临这个奇怪的问题。

小于 4px 的线性渐变条纹不可见。请看截图和代码：

这是代码：

        background-image: -moz-repeating-linear-gradient(
        transparent 0, transparent calc(48.5 * 16px), /* White Space */
        black calc(48.5 * 16px), black calc((48.5 *16px) + 1px), /* Line */
        red calc((48.5 *16) + 1px), red calc(56 * 16px) /* White Space */
    );

这不会渲染任何东西，除非“+ 1px”切换到+4px。我试过直接写像素数，以及 rem 单位，但结果是一样的。相同的代码（没有 -moz 前缀，在 chrome 上运行良好）。

通过调试，我发现幻数是 4px。低于此的任何内容都不会呈现。

关于可能导致问题的任何想法？

标签： cssfirefoxsafarimozillarepeating-linear-gradient