title: Extra whitespace on top of image in Safari
body: <h1>Can anybody explain why some iphones running safari have extra space on top of the image?</h1>
  <p><b>I have included an example project here:</b><br />
  <a href="https://jsfiddle.net/3wL9m6qf/16/" rel="nofollow noreferrer">https://jsfiddle.net/3wL9m6qf/16/</a><br /></p>
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div class='block blogBlock yellowBg'&gt;
      &lt;h2 class='blockTitle'&gt; At vero eos et accusamus et iusto odio&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class='blogImage'&gt;
      &lt;Image src=&quot;https://picsum.photos/seed/picsum/600/300&quot;&gt;&lt;/Image&gt;
      &lt;a class=&quot;bold&quot;&gt;10-2021&lt;br&gt;&lt;/a&gt;
      &lt;a&gt;At vero eos – accusamus&lt;/a&gt;
    &lt;/div&gt;
    
    &lt;div class='about2'&gt;
      &lt;a&gt;
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <hr />
  <pre><code>.blogBlock {
      padding: 30px 4% 30px 7%; 
      margin: 0;
  }
  
  .blogImage &gt; img {
      margin: 0;
      padding: 0;
      height: 100%;
      max-height: 300px;
      -webkit-background-size: 100%; 
      -moz-background-size: 100%; 
      -o-background-size: 100%; 
      background-size: 100%; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      object-fit: contain;
  }
  
  .blogImage {
      margin: 0;
      padding: 0;
      height: 100%;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      text-align: center;
      background-color: darkslategrey;
  }
  
  .blockText a, .blockTitle {
      color: #fff;
      margin: 0;
      padding: 0 0 14px;
      background-color: #000;
  }
  
  .yellowBg {
      background-color: #e4950c;
  }
  
  .bold {
      font-weight: 800;
  }
  
  .displayBlock {
      display: block;
  }
  
  .noTextDecoration, .noTextDecoration&gt;a {
      text-decoration: none;
  }
  
  .about2 {
      margin-left: 7%;
      max-width: 84%;
  }
  
  @media screen and (min-width: 600px) {
    h1, h2 {
      font-size: 2rem;
  }
    .link, a {
      font-size: 1rem;
    }
  }
  
  @media screen and (min-width: 1100px) {
      .blogBlock {
          padding: 25px 4% 120px 7%; 
          margin-bottom: 20px;
      }
  
      .blogImage &gt; img {
          max-height: 300px;
      }
  
      .blogImage {
          width: 30%;
          height: 30%;
          float: right;
          margin-right: 20px;
          position: relative;
          bottom: 190px;
      }
      .navTitle {
          font-size: 2.6rem;
      }
  }
  </code></pre>
  <p>Everything loads and works as expected, however <b>some iPhones on safari show some extra space above the image.</b> (see the slate-grey background on top of the image)<br />
  <a href="https://i.stack.imgur.com/1E1V5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1E1V5.png" alt="Example of it going wrong" /></a></p>
  <p>I've tried running the website on cross browser testing tools but none of them show this issue (at least the once I got my hand on). Checked browsers:</p>
  <ul>
  <li>chrome windows - no problem</li>
  <li>chrome android - no problem</li>
  <li>ecosia android - no problem</li>
  <li>firefow windows - no problem</li>
  <li>safari ios testing tool - no problem</li>
  <li>iPhone ??? safari - extra space</li>
  </ul>
  <p>Please <b>check my included jsfiddle to see how I'm handling the image scaling.</b> But long story short i use:</p>
  <ul>
  <li>image container &gt;  margin and padding = 0; height= 100%;</li>
  <li>image &gt;  margin and padding = 0; height= 100%; max-height = 300px; background-size: 100%;
  background-size: cover; object-fit: contain;</li>
  </ul>
  <p>I have tried to find people with the same issue, but only found issues with horizontal space. None of which seems to apply to my problem.</p>