CSS с повторяющимся линейным градиентом не показывает линии меньше 4 пикселей
Столкнувшись с этой странной проблемой в firefox / safari.
Полосы линейного градиента менее 4 пикселей не видны. См. Снимок экрана и код:
Вот код:
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).
Из отладки я выяснил, что магическое число - 4 пикселя. Все, что ниже этого, не отображается.
Есть идеи о том, что может вызвать проблему?