CSS repeating-linear-gradient not showing lines less than 4px

Question

Facing this weird issue in firefox/safari.

Linear Gradients stripes less than 4px are not visible. Please see screenshot and code:

Here is the code:

        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 */
    );

This doesn't render anything, unless the "+ 1px" is switched to +4px. I've tried directly writing pixel counts, as well as rem units, but the result is the same. The same code (without the -moz prefix, works fine on chrome).

From debugging, I've figured out the magic number is 4px. Anything below this is not rendered.

Any ideas on what could be causing the issue?