How to make FireFox and background-size friends?

Question

laptops

Task: to impose a pattern in the form of a fine grid over the image. As a result, we get the effect that when the image is scaled, the grid will look different.
Solution: for the parent element, I create a pseudo-element, in which I set my own pattern as a background image. The code is something like this (inside parallax-mirror is img):

.parallax-mirror::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(images/parallax-pattern.png);
    opacity: .2;
    background-size: contain;
}

Issue: On FireFox, when using background-size: contain; what happens is that while the page is loading, everything is fine, but as soon as the page is completely loaded, the pattern disappears, the picture just becomes slightly darkened. In Chrome, IE everything is fine. What do you advise?
PS In general, initially the pattern was sewn into the images, but in this form they weigh too much, so this way of overlaying the pattern is for the sake of economy.

Answer 1

In your case, it's most likely just a coincidence. As a rule, the failure to start the motherboard can be in the following cases: damage to the BIOS firmware, malfunction of the RAM or video card, failure of the power supply (voltage drop), failure of the motherboard. Your background about working with the file system has nothing to do with the current symptoms. In your case, it is better to contact the service center.

Answer 2

The principle is...
codepen.io/aliencash/pen/EyQyWy

Answer 3

Here is an option with a scalable grid (you can drag the textarea by the corner for resizing)
codepen.io/anon/pen/amoEzP
Although, when it’s very small, it still merges - well, you can’t make a cell smaller than a physical pixel))