The shadow box does not match the sides of the element

Question

Note. Do not focus on the purpose of this code, this is just a minimalist example to emphasize the problem raised.

When I use the box-shadow property, it sometimes does not match the sides of the element, resulting in 1px (or less) of the field between the element and its shadow. Here is an example using transform to raise the problem (I think this is not the only way to get it):

 h1 { width: 100px; text-align: center; margin: 25px 55px; background: black; box-shadow: 30px 0 0 black, -30px 0 0 black; font-size: 24px; line-height: 50px; /* I use 0.5px to show the bug, I would use n% in real conditions */ transform: translate(0.5px, 0); } h1 a { color: white; text-decoration: none; } 

 <h1><a href="#">Foo</a></h1> 

If you don’t see anything, try looking at the full-screen snippet and resize your browser (I have a problem with Chrome and Firefox). Below is a picture with several screenshots that I took, and the expected result (obvious):

Has anyone encountered this problem?
It looks like a browser, but is it possible to find a workaround to avoid these fields?

EDIT

I found something new: if I set the shadow on one side, the gap does not occur using Chrome (it is still here with Firefox):

 h1 { width: 100px; text-align: center; margin: 25px 55px; background: black; box-shadow: 30px 0 0 black, -30px 0 0 black; font-size: 24px; line-height: 50px; /* I use 0.5px to show the bug, I would use n% in real conditions */ transform: translate(0.5px, 20px); } h1 a { color: white; text-decoration: none; } h1:nth-child(2) { box-shadow: 30px 0 0 black; } h1:nth-child(3) { box-shadow: -30px 0 0 black; } 

 <h1><a href="#">Foo</a></h1> <h1><a href="#">Foo</a></h1> <h1><a href="#">Foo</a></h1> 

Answer 1

This CSS works:

 h1 { width: 100px; text-align: center; margin: 0px; background: green; box-shadow: 30px 0 0 black; font-size: 24px; line-height: 50px; /* I use 0.5px to show the bug, I would use n% in real conditions */ transform: translate(0.5px, 0); } h1 a { color: white; text-decoration: none; } 

Here is the fiddle . The colors you used (black on black) made the slight difference you saw. Color change will do it.

Answer 2

Using Chrome Version 42.0.2311.90 m

When the browser resolution changes (from 25% to 500%) and
y axis is 0 or 0px
a gap arises. Code example:

  transform: translate(0.5px, 0); transform: translate(0.5px, 0px); transform: translate(7px, 0); transform: translate(7px, 0px); 

Using zessx EDIT , showing 3 examples in the output, I got the same result that he did for

  transform: translate(0.5px, 20px); 

But when I deleted one “px” on any axis, there was no space. Examples:

  transform: translate(0.5px, 20); transform: translate(0.5px, 1); transform: translate(0.5, 20px); transform: translate(0, 20px); 

The space moves (from L to R to) only for the shadow window on both sides as the resolution changes in Chrome, as pointed out by zessx