The break-inside CSS property is not able to handle box-shadow

Question

I was trying to align some list items into columns using the column property. The columns aligned my elements properly, however the drop shadow attributed with each of those elements are breaking. The upper part of the drop shadow of first element of a column lags behind in the previous column.

Please refer the image below and this codepen for a demo.

Here's the code:

HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS:

li {
  width: 50px;
  height: 70px;
  text-align: center;
  display: block;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
  -webkit-box-shadow: 0px 0px 9px 4px #CCC;
  -moz-box-shadow: 0px 0px 9px 4px #CCC;
}

ul {
  margin: 40px;
  -webkit-column-count: 4;
  -webkit-column-gap: 25px;
  column-count: 4;
  column-gap: 25px;
  width: 300px;
}

I want to know if there is a way to fix this issue. I can use flex or any other grid technique, but this was the most apt and convenient method for my purpose. I was wondering what is causing this issue and if it can be fixed. If this issue has already been discussed on this website, please provide a link. TIA

EDIT : This seems to be working fine for mozilla, this issue can be seen in chrome.

Answer 1

For Chrome, you need to add some margins to include enough space for the shadow to show, to avoid to see it broken and avoid the box to break as well, you need, at this time, to use display:inline-block;

/* Added*/

li {
  margin: 5px 0;
  display: inline-block;
}
/* End added*/

li {
  width: 50px;
  height: 70px;
  text-align: center;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
}
ul {
  margin: 40px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  width: 300px;/* for 3 col, 375px for 4 cols ;) */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Beside, if you count 4 columns, set the size to around 375px, or for 3 column, 300px should be fine

fork of your pen

---

3 years later ... bug still around.

Render can also be better via backface-visibility:hidden;

/* Added*/

li {
  margin: 5px 0;
  display: inline-block;
  backface-visibility:hidden;
}
/* End added*/

li {
  width: 50px;
  height: 70px;
  text-align: center;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
}
ul {
  margin: 40px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  width: 300px;/* for 3 col, 375px for 4 cols ;) */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>