Extra whitespace on top of image in Safari

Question

Can anybody explain why some iphones running safari have extra space on top of the image?

I have included an example project here:
https://jsfiddle.net/3wL9m6qf/16/

<html>
<body>
  <div class='block blogBlock yellowBg'>
    <h2 class='blockTitle'> At vero eos et accusamus et iusto odio</h2>
  </div>
  <div class='blogImage'>
    <Image src="https://picsum.photos/seed/picsum/600/300"></Image>
    <a class="bold">10-2021<br></a>
    <a>At vero eos – accusamus</a>
  </div>
  
  <div class='about2'>
    <a>
      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.
    </a>
  </div>
</body>
</html>

.blogBlock {
    padding: 30px 4% 30px 7%; 
    margin: 0;
}

.blogImage > 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>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 > img {
        max-height: 300px;
    }

    .blogImage {
        width: 30%;
        height: 30%;
        float: right;
        margin-right: 20px;
        position: relative;
        bottom: 190px;
    }
    .navTitle {
        font-size: 2.6rem;
    }
}

Everything loads and works as expected, however some iPhones on safari show some extra space above the image. (see the slate-grey background on top of the image)

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:

chrome windows - no problem
chrome android - no problem
ecosia android - no problem
firefow windows - no problem
safari ios testing tool - no problem
iPhone ??? safari - extra space

Please check my included jsfiddle to see how I'm handling the image scaling. But long story short i use:

image container > margin and padding = 0; height= 100%;
image > margin and padding = 0; height= 100%; max-height = 300px; background-size: 100%; background-size: cover; object-fit: contain;

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.

Extra whitespace on top of image in Safari

Can anybody explain why some iphones running safari have extra space on top of the image?

0 Answers0