Flex макет работает некорректно в Сафари

#html #css3 #bootstrap #flexbox #safari

Сделал на пробу макет, который работает как нужно в IE, FireFox и Chrome под Windows,
даже под IE11.

Но рано обрадовался. В Safari под Mac и на iPad'е не работает промежуточный вариант
с двумя колонками (ширина между 768 и 1199).

Я только начал знакомство с flex и пока вообще не представляю, в чем может быть проблема.
Доступ к Mac'у у меня тоже пока ограничен, чтобы поиграться с вариантами.

Буду признателен, если кто-то сможет помочь.



#section-tiles-home {
  margin: 15px;
}

#section-tiles-home .row {
  margin: 0;
}

#section-tiles-home [class^="col-"] {
  padding: 0;
}

#section-tiles-home .tile-img {
  margin: 0 0 15px;
}

.tiles-col-1,
.tiles-col-2 {
  display: flex;
}

.tiles-col-2,
.tiles-col-3 {
  flex-direction: column;
}

.tiles-col-1>.tile-img {
  flex-grow: 1;
}

.tiles-col-2 .tile-img:nth-child(1) {
  flex-grow: 2;
}

.tiles-col-2 .tile-img:nth-child(2) {
  flex-grow: 3;
}

.tiles-col-3>.row {
  flex-grow: 1;
}

.tiles-col-3 .tile-img {
  height: 65vw;
}

.tile-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}

.tile-img-text-container {
  align-self: stretch;
  color: #fff;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 15px;
  transition: all .3s ease-in-out;
}

.tile-img-text-container a {
  text-decoration: none;
}

.tile-img-text-container a:hover {
  text-decoration: underline;
}

.tile-img-text-container .h3 {
  font-size: 20px;
  margin: 0;
  transition: all .3s ease;
}

.tile-img-text-container .tile-img-text {
  display: none;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
}

.tile-img-text-container:hover {
  background: rgba(0, 0, 0, 0.5);
}

.tile-img-text-container:hover .h3 {
  transform: translateY(-20px);
}

.tile-img-text-container:hover .tile-img-text {
  animation: slideInUp .3s ease;
  display: block;
}

@media (max-width: 767px) {
  .tiles-col-1 .tile-img {
    height: 100vw;
  }
  .tiles-col-2 .tile-img:nth-child(1) {
    height: 84vw;
  }
  .tiles-col-2 .tile-img:nth-child(2) {
    height: 105vw;
  }
}

@media (min-width: 768px) {
  #section-tiles-home {
    margin: 7px;
  }
  #section-tiles-home>.row {
    display: flex;
  }
  #section-tiles-home .tile-img {
    margin: 7px;
  }
  .tiles-col-2 .tile-img {
    flex-basis: 0;
  }
  .tiles-col-3 .tile-img {
    height: 21vw;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  #section-tiles-home>.row {
    flex-flow: wrap;
  }
  .tiles-col-1 .tile-img {
    height: 66vw;
  }
}

@media (min-width: 992px) {
  .tile-img-text-container .h3 {
    font-size: 24px;
  }
  .tile-img-text-container .tile-img-text {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .tiles-col-3 .tile-img {
    height: 16vw;
  }
  .tile-img-text-container .h3 {
    text-transform: uppercase;
  }
}

@media (min-width: 1600px) {
  .tile-img-text-container .h3 {
    font-size: 30px;
  }
}




  
  
  
  
  
  




  

    

      

        

          

            
Tile 1
            

              

                

                  
                    
                  
                
                

                  Lorem ipsum dolor sit amet
                
              
              

                

                  
                    
                  
                
                

                  Lorem ipsum dolor sit amet
                
              
              

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
adipisci distinctio ducimus ipsa modi neque quia quod rerum vel! Culpa nihil nisi numquam
perspiciatis quam quod reiciendis repellat saepe? Pariatur!
              
              Link
            
          
        
      
      

        

          

            
Tile 2
            

              Link
            
          
        
        

          

            
Tile 3
            

              Link
            
          
        
      
      

        

          

            

              

                
Tile 4
                

                  Link
                
              
            
          
          

            

              

                
Tile 5
                

                  Link
                
              
            
          
          

            

              

                
Tile 6
                

                  Link
                
              
            
          
        
      
    
  






    

Ответы

Ответ 1

Хм, кажется нашлось решение. На решение натолкнул этот вопрос/ответ тёзки:
проблема с flex-wrap + bootstrap3 на safari 9

Добавил в CSS это и все заработало:

#section-tiles-home .row:after,
#section-tiles-home .row:before {
    display: inherit;
}