I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to encounter compatibility issues with Firefox; perhaps requiring a polyfill or potentially due to an error in my code.
To observe the problem, open the latest version of Firefox (52, although other versions exhibit the same issue) and visit this jsfiddle:
https://jsfiddle.net/g5v0o7ks/4/
The CSS snippet causing trouble:
background-size: 256px 256px;
background-image:
repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%),
repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%);
When you increment or decrement each input by 1, notice that the linear gradients disappear completely once they exceed 255 pixels, unlike the behavior observed in Chrome. I have attempted adjusting with percentage values, but the problem persists beyond the hard limit of 255 pixels.
This issue seems inconsistent with the expected behavior since there is no documented pixel limit for background-size on the MDN page. Has anyone else faced this problem before, or can you identify an error in my code causing the jsfiddle to not work as intended?