What's wrong with color, browser?

Question

css

Hey! I ran into such a problem and I don’t know where to dig and what it could be. More clearly in the screenshots
#1 Mozilla FF
Background color # 111111, displays as it always displayed for me.
#2 Opera/Chrome - the same color as #111111, but some rectangle appears under the text.
If I change the color to 222, it shows well everywhere, but everything that lies next to #111 to the right and left is always squares and rectangles.
Another shade
has the same problem.
And the other color
is all good
Please help me understand what the problem is, this happens not only in a particular foam, but it has not been observed before.
Tags are tricky, so sorry

Answer 1

Would throw off the link to the codepen, so it would be easier to figure it out

Answer 2

The problem is in the monitor, maybe you have automatic color adjustment.