title: Responsive square img (padding-bottom: 100%) not working on iOS?
body: <p>I have a grid of "Related posts" in my blog and tried the <code>padding-bottom: 100%</code> trick to make the image of each post responsive square.</p>
  
  <p>It works on desktop but on mobile iOS the height of the images stretches to 100% of the viewport. On Samsung phone works fine.</p>
  
  <p>Where am I going wrong? 
  I checked the <code>object-fit</code> property on <em>Caniuse</em> and it is largely supported. Tried on Safari, Chrome, Edge, and Firefox: same strange behavior.</p>
  
  <p>Thanks in advance for your valuable help!</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;!-- GRID CONTAINER --&gt;
  &lt;div class="related-posts"&gt; 
  
      &lt;!-- IMAGE OF EACH GRID ITEM --&gt;
      &lt;a class="img-wrapper"&gt;
           &lt;img src="/path/to/img"&gt;
      &lt;/a&gt;
  
      ... &lt;!-- OTHER GRID ITEMS --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the SASS:</p>
  
  <pre><code>.related-posts
     display: grid
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
     grid-gap: 1.5rem
  
  .img-wrapper
     display: grid
     place-items: center
     &amp;::before
       content: ""
       padding-top: 100%
       display: block
       grid-area: 1 / 1 / 2 / 2
     img
       width: 100%
       height: 100%
       object-fit: cover
       grid-area: 1 / 1 / 2 / 2
  </code></pre>