I made a grid background for one element using 2 linear gradients. The lines however don't have consistent thickness and appear blurry in some segments, very clear in others, etc. - see this screenshot:FF screenshot.
The actual CSS for the background looks as follows:
background-image: linear-gradient(to right, black 1px, transparent 0%),
linear-gradient(to bottom, black 1px, transparent 0%);
background-size: 22px 22px;
background-repeat: repeat;
A JS script automatically scales the element's width and height to multiples of 22px based on the available space.
I tried to modify the gradient a bit in terms of size and line width, and with those two being comparatively large everything seems to be fine. But that's not what I want. I also tried using an image I made in Paint3D, but it didn't change anything.
I turned to other browsers, and different engines seem to render it in a different manner, but the problem still persists in one way or another (the above screenshot is FF). It appears as though this is an issue with the rendering itself, and needless to say I have no idea what I could do.
I thank in advance for any suggestions on how to fix this problem.
