title: Absolute positioned link not clickable except for a small space on mobile
body: <p>I have a Lity anchor link that should pop up a modal containing a Youtube video. The odd thing is that this works completely fine on Chrome desktop, but on Safari and Chrome mobile the link is not clickable minus a small area. I've tried various z-indexing, various pointer-events, and tried removing the absolute positioning altogether yet it's still not clickable on mobile.</p>
  <p>I've added borders to show where the clickable area vs not clickable area is. The blue outside the red/green borders allows the modal to pop out. Inside the red/green it is not clickable.</p>
  <p>Again this is only on Safari and Chrome mobile browser, everything is fine on desktop.</p>
  <p>Here's the HTML structure</p>
  <pre><code>&lt;div class=&quot;featured-video&quot;&gt;
      &lt;a href=&quot;https://www.youtube.com/embed/_XXXXXX&quot; data-lity=&quot;&quot; class=&quot;videoLink&quot;&gt;
          &lt;img data-src=&quot;https://i3.ytimg.com/vi/XXXXXX/hqdefault.jpg&quot; alt=&quot;product video&quot; class=&quot;videoImage lazyloaded&quot; src=&quot;https://i3.ytimg.com/vi/_R1CnAi4PKM/hqdefault.jpg&quot;&gt;
          &lt;span class=&quot;yt-thumb-button&quot;&gt;.&lt;/span&gt;
      &lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Here's my CSS/SCSS</p>
  <pre><code>.featured-video {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      z-index: 100;
      pointer-events: none;
      border: 1px solid blue;
  
      .videoLink {
          
          position: absolute;
          top: 0;
          left: 50%;
          width: 90%;
          height: 90%;
          transform: translateX(-50%);
          z-index: 101;
          display: block;
          border: 1px solid limegreen;
          pointer-events: auto;
  
      }
  }
  
  .yt-thumb-button {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      // z-index: 1;
      background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center;
      background-size: 20%;
      color: transparent !important;
      pointer-events: none;
  
      border: 1px solid red;
  
      &amp;:hover {
          opacity: .4;
          transition: opacity .2s ease-out;
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6nUC6.jpg" rel="nofollow noreferrer">Clickable Area Image</a></p>