Trouble with box-shadow inset

1

Hello Campers!

I am struggling with strange behaviour of “inset box-shadow”.
There is some 1px-wide line of background-color on the edge of div, and it is not affected by shadow.

Please take a look at the code to understand what i mean: https://jsfiddle.net/g5vgant8/
(Try to resize viewport if all seems ok, you should see that ugly lines)

My goal is to make smooth passage from outer color to inner color.
(Same situation in my Tic-Tac-Toe project: https://codepen.io/Keith_Martens/pen/JJdPag )

I have tried to:

  • add outset shadow,
  • use extra wrapper div with its own background-color and padding,
  • set negative value of shadow blur,
  • use 4 shadows, one for each corner,
  • change inner background-color to same as outer, and use big inset shadow with inner color instead,

…but none of these solves the problem.:frowning_face:

Seems that is not a bug, because i tested in 3 browsers and also IE, and the behaviour is always same.

Maybe you have any ideas?

2

Looks like it’s triggered by transform: translate. I have no idea why.

3

adding: -webkit-backface-visibility: hidden; to inner will fix it. but don’t know how it works.

4

You can stop fighting with it now. There’s technically no way to get rid of it.

What you’re seeing is a rounding error as the <div>s resize. The browser has to resize the div and it’s shadow.

You can hide it with a border though. border: 1px solid #440000; removed it for me. If you are using the same colour for outer and inner shadows, the border should remain hidden:

.inner{
  position: relative;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #DCDCDC;

  /* magic starts here */
  border: 1px solid #440000;
  box-shadow: inset 0 0 50px 50px #440000, 0 0 50px 50px #440000;
}
5

Thanks all, that helpeed a lot, now the problem is actual only for IE (not surprised)