title: Drop-shadow not working properly on iOS Safari
body: <p>I have added drop shadows to labels for checkboxs so that when they are checked the drop shadow appears. They work perfectly on chrome however when I tried them on safari on both my mac and iPhone the drop shadows are not appearing. I have tried using the -webkit-filter CSS but this has not had any effect.</p>
  <p>I have included both the HTML and CSS below.</p>
  <pre><code>&lt;li&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;dairy&quot; name=&quot;lifestyle&quot; value=&quot;dairy-&quot;&gt;
  &lt;label for=&quot;dairy&quot;&gt;
  &lt;img src=&quot;https://cdn.shopify.com/s/files/1/0433/2958/5306/files/Cheese_Icon.png?v=1611093331&quot; class=&quot;choose--contents--img&quot; alt=&quot;&quot;&gt;
  &lt;p&gt;Dairy&lt;/p&gt;
  &lt;/label&gt;
  &lt;/li&gt;
  
  
  label {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #5E7735;
    background-color: white;
    border-radius: 8px;
    width: 117.5px;
    height: 140px;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  :checked + label {
    filter: drop-shadow(6px 6px 0 #5E7735);
    -webkit-filter: drop-shadow(6px 6px 0 #5E7735);
    -moz-filter:  drop-shadow(6px 6px 0 #5E7735);
    -ms-filter:  drop-shadow(6px 6px 0 #5E7735);
    -o-filter: drop-shadow(6px 6px 0 #5E7735);
    transition: filter 0.1s ease-in;
    -webkit-transition: filter 0.1s ease-in;
  }
  </code></pre>
  <p>They should look like this</p>
  <p><img src="https://i.stack.imgur.com/UWMNw.png" alt="Example of them from chrome" /></p>
  <p>But they look like this (the shadow is cut off)</p>
  <p><img src="https://i.stack.imgur.com/fvXwM.png" alt="Example from Safari" /></p>