title: Strange CSS drop-shadow behavior when child is positioned outside of parent in Chrome only
body: <p>Currently I am working on a website for a client and noticed a really strange behavior of the CSS drop-shadow filter.</p>
  <p>I have a green box as a container with a drop shadow:</p>
  <pre><code>.box {
    background-color: #92be1f;
    color: #ffffff;
    filter: drop-shadow(1.5rem -1rem 0 rgba(0, 0, 0, 0.3));
    margin: 0 auto;
    max-width: 70%;
    padding: 2rem 1rem 32rem 1rem;
  }
  </code></pre>
  <p>And a child which is positions outside of the parent:</p>
  <pre><code>.image {
   background-color: #000000;
   height: 2.5rem;
   transform: translateY(-4rem);
   width: 2.5rem;
  }
  </code></pre>
  <p>As you can see in <a href="https://i.stack.imgur.com/urXqA.png" rel="nofollow noreferrer">this picture</a> the drop shadow of the green box is getting cut off on the bottom edge of the window. This only happens if the child is outside of the container. Is this a bug in Chrome or do I missing something?</p>
  <p>I have created a <a href="https://jsfiddle.net/me5f27qL/" rel="nofollow noreferrer">JSFiddle link</a> to demonstrate the problem better. You can see this effect best if you scroll down and look at the drop shadow on the bottom edge.</p>
  <p>Thanks for your answers!</p>