I've encountered an issue with some divs specifically in Safari, as other browsers seem to function correctly. Occasionally, these rectangles will appear and disrupt the layout, causing overlaps with images. Interestingly, this problem seems to only occur when the project is deployed, not on my local server.
Note the background color bleeding over the images
Interestingly, I have found that the issue resolves itself in the following ways:
- Resizing/zooming the page
- Opening the web inspector (without performing any actions)
- Refreshing the page—occasionally
This is what the HTML looks like for the three divs (.ldb-part) and their parent div (.ldb):
HTML:
<div class="ldb">
<div class="ldb-part">
<h3>Landscape</h3>
<img src="/Image1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
<div class="ldb-part">
<h3>Design</h3>
<img src="/Image2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
<div class="ldb-part">
<h3>Build</h3>
<img src="/Image3.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
CSS:
.ldb {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
justify-content: center;
position: absolute;
top: 93%;
max-width: 70vw;
height: 20em;
padding-bottom: 4em;
}
.ldb-part {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
justify-content: space-around;
flex-direction: column;
text-align: center;
width: 30%;
height: inherit;
margin: 0 1em;
padding: .5em;
border: 1px solid #BDBDBD;
border-radius: 10px;
background: #FFFDF8;
}