html - Flexbox bug on safari

Question

I'm having an issue with some divs in Safari, other browsers work fine. Sometimes, but not every time, these rectangles appear, distort the layout, and overlap the images. It doesn't occur on my local server, just when I deploy it.

Take note of the background color appearing over the images

It fixes itself if:

1. I resize/zoom the page.
2. I open web inspector (just open it, not anything else)
3. I refresh the page—sometimes

This is what I have 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;
}

Answer 1

In my experience flexbox does not work in Safari at all, but it worked when I substituted it with gird display.

Using grid display may solve the problem here to

.ldb-part {
display: grid;
grid-template-rows: auto auto;

align-items: center;
justify-content: space-around;

text-align: center;

width: 30%;
height: inherit;
margin: 0 1em;
padding: .5em;
border: 1px solid #BDBDBD;
border-radius: 10px;
background: #FFFDF8;

}