The break-inside CSS property is not able to handle box-shadow
<p>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.</p>

<p>Please refer the image below and <a href="http://codepen.io/kchetan92/pen/yOOPBG" rel="nofollow noreferrer">this codepen</a> for a demo.</p>

<p><a href="https://i.stack.imgur.com/sJoMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sJoMZ.png" alt="drop shadow gets cut due to column layout"></a></p>

<p>Here's the code:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>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;
}
</code></pre>

<p>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</p>

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