在 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。低于此的任何内容都不会呈现。
关于可能导致问题的任何想法?