Flex elements with background images overlapped in Safari

Question

This is a responsive single page built with Gatsby:

<div className='sections'>                
  <section className='section1'>
    <h1 className='title'>Title</h1>
    <div className='subTitle'>
       <h1 className='subtitleRow'>Subtitle</h1>
       <div className='logo'>
          <img src={logo} alt='Logo'></img>
       </div>                        
     </div>
     <p className='someText'>Blablabla</p>
     <p className=‘someText'>More blablabla</p>
   </section>
    <section>
        … same stuff as previous section
    </section>
</div>

CSS:

@media only screen and (max-width: 719px) {

 .sections {
   display: flex;
   display:-webkit-flex; /* Safari */  
   flex-direction: column;
   justify-content: flex-start;
 }

.section1 {    
    display: flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;    
    height:0;
    width:100%;
    padding-bottom: 74.94%;/*https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size*/
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./images/imageMobile.png)      
  }

.title{ 
    margin-top: 10%;
    padding-left:3%;
    font-size: 4vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;
  }

}
.subtitleRow{
    display:flex;
    display:-webkit-flex; /* Safari */
    flex-direction: row; 

  }

.logo{
    display:flex;/*Flex required when images are used*/
    display:-webkit-flex; /* Safari */  
    flex-direction: column;
    width: 13%;
    height: 13%; 
     }

  .logo img{
    width: 100%;
  }

.someText {    
    padding-left:3%;
    padding-right: 3%;
    font-size: 3vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;    

  }

}

@media only screen and (min-width: 720px){

 .sections {
   display: flex;
   display:-webkit-flex; /* Safari */  
   flex-direction: row;
   justify-content: flex-start;
 }

.section1 {    
    display: flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;    
    height:0;
    width:100%;
    padding-bottom: 74.94%;/*https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size*/
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./images/imageDesktop.png)      
  }

 .title{
      padding-left:9%;
      margin-top: 7%;
      font-size: 1.3vw;
      color:white;
      font-family: 'Gotham';
      font-weight: normal;
      word-wrap: break-word;
 }

.subtitleRow{
    display:flex;
    display:-webkit-flex; /* Safari */
    flex-direction: row; 

  }

.logo{
    display:flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;
    width: 13%;
    height: 13%; 
     }

  .logo img{
    width: 100%;
  }

.someText {    
    padding-left:9%;
    padding-right: 9%;
    font-size: 0.7vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;
  }
}

I'm using this nice hack How to get div height to auto-adjust to background size? to set the height to the divs that have a background image.

This works fine in Chrome and Firefox, however in Safari (MacOS and iOS) the p elements are displayed at the top of the section container overlapping the Title and Subtitles. Checking the DOM the elements are in the same order they are defined...

I tried setting the display, flex-direction, order attributes with no luck...

Any ideas?

Thanks!

Answer 1

Setting

.section1 {
    height:auto;
  }

And removing padding-bottom fixed this.