I'm attempting to create a grid overlay using an absolutely positioned uninteractable div. I'm attempting to accomplish this using a repeating-linear-gradient attribute as I've seen suggested elsewhere for this solution. The implementation of this feature works fine on Chrome, but I seem to need some sort of polyfill -- or I'm doing something wrong -- for firefox compatibility.
To view the issue, in the most recent version of firefox (52, although other versions exhibit my issue as well) and access this jsfiddle:
https://jsfiddle.net/g5v0o7ks/4/
the resultant css in question:
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%);
increment each of the inputs by 1 each. Decrement them too. The linear gradients entirely vanish when exceeding 255 pixels, which doesn't seem to happen in chrome. I've tried handling this with percentage values as well, but the gradients still vanish over the hard 255 pixel limit.
I assume that this issue isn't an intended behavior, as background-size doesn't have any noted pixel limit on the MDN page. Has anyone run into this issue before, or do you notice an error in my code that's causing the jsfiddle not to function as expected?
Your issue is happening in Chrome (v.58 - 64-bit), on a Linux machine, too. The workaround is to modify your background-image from:
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%)
... to (all 1px instances replaced by 2px):
background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%), repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%)
...when between 256px and 511px. Haven't tested, but I assume ... - 3px... is going to work up to 767px.
Do you see a pattern here? As you'd expect, this works in Firefox too.
Why? Beats me! But I recon it has something to do with sub-pixel rendering. I know, it shouldn't (after all, you're deducting 1px) but this is why web is grand, isn't it?