Box-shadow doesn't fit element's sides

Question

Note: don't focus on the purpose of this code, it's only a minimalist example to highlight the issue encoutered.

When I'm using the box-shadow property, it sometimes doesn't fit the element's sides, resulting by a 1px (or less) margin between the element and its shadow. Here is an example, using transform to raise the issue (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 to look the full-screen snippet, and resize your browser (I got the issue with Chrome and Firefox). Below is a picture with several screenshots I made, and the (obvious) expected result:

enter image description here

Does anybody faced this issue?
Looks like a browser one, but can we find a workaround to avoid these margins?

EDIT

I've found something new: if I set a box-shadow on a single side, the gap doesn't occurs, using Chrome (it's 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>

enter image description here

what's the purpose of `transform: translate(0.5px, 0);` ? what if you remove it? — Fabrizio Calderan, Mar 03 '15 at 15:20
Wondering what **half** a pixel looks like. Rounding would always be an issue...no? — Paulie_D, Mar 03 '15 at 15:20
Its purpose it to ensure you'll see the bug (whatever your screen resolution). But it happens to me to use percents in translation, which results by the same bug: `transform: translate(25%, 0);` — zessx, Mar 03 '15 at 15:21
Again, using % would also cause rounding issues...I'm curious as to what this box-shadow is actually for. It seems a curious option for a simple link. — Paulie_D, Mar 03 '15 at 15:23
Don't focus on the example :) I made it as simple as possible to highlight the issue. My code is far more complex, and this could happen with any box-shadow. I added a note for future readers. — zessx, Mar 03 '15 at 15:25
Do you have somewhere with a **live** example (not forced) that actually demonstrates the issue in a working environment, — Paulie_D, Mar 03 '15 at 15:27
[adding a border](http://jsfiddle.net/webtiki/kgv5ut9x/) corrected the issue for me (chrome 40 win7) — web-tiki, Mar 03 '15 at 15:34
@zessx My recent post [here](http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline/28835139#28835139) is suffering from the same issue which i was going to ask! — The Pragmatick, Mar 03 '15 at 15:36
Box shadow seems to create the jagging problem. see this : [img](http://i.stack.imgur.com/j8tWL.png) — The Pragmatick, Mar 03 '15 at 15:38
@web-tiki Great tip, even if it doesn't worked on my project (damn...) — zessx, Mar 03 '15 at 15:40
Not sure if this is related: http://stackoverflow.com/questions/27223880/small-space-between-box-shadow-and-div-when-alpha-set (or a google search for [**box-shadow gap**](https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=box+shadow+gap&tbs=qdr:y) turns up some others.) — Paulie_D, Mar 03 '15 at 15:40
@Paulie_D Not really. The real goal is to have a multiline title, with left/right padding on **every** line. — zessx, Mar 03 '15 at 15:45
@Paulie_D I forgot a point, sorry. I need an extra 1px margin between each line (this last point explains why I came to a darker solution) — zessx, Mar 03 '15 at 15:54
Any thoughts on this - https://css-tricks.com/multi-line-padded-text/ — Paulie_D, Mar 03 '15 at 16:06
I precisely use one of the methods described in this article. — zessx, Mar 03 '15 at 16:07

score 0 · Answer 1 · answered Apr 09 '15 at 17:17

0

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 a Fiddle. The colors you were using (black on black) made the slight difference you saw. Changing the colors will do it.

answered Apr 09 '15 at 17:17

yaakov

4,568
4
27
51

That's wrong, I still have the gap. But I've find something new with your code. **The gap only occurs when I've got a box-shadow on both sides (Chrome only).** – zessx Apr 14 '15 at 11:17
`transform:translate(.5px, 0);` You are moving the `h1` and not the box-shadow. Try getting rid of the `transform`. – yaakov Apr 16 '15 at 15:29

score 0 · Answer 2 · 2015-04-19T10:07:43.660

Using Chrome Version 42.0.2311.90 m

When the browser resolution changes (from about 25% to 500%) and
the translate y-axis is 0 or 0px
the gap occurs. Example code:

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

Using zessx's EDIT, showing 3 examples on output, I got the same result he did for

    transform: translate(0.5px, 20px);

But when I removed one "px" on either axis there was NO gap. Examples:

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

Gap moves (L to R to gone) only for shadow-box on both sides as resolution changes in Chrome, as stated by zessx

Box-shadow doesn't fit element's sides

EDIT

2 Answers2