Flexbox layout breaking on Safari Browser

Question

I am trying to create a chat message style page using bootstrap and custom CSS code. The code is working fine on chrome browser but on Safari mobile and desktop the layout is breaking.

The problem is that the message divs with images are overlapping means images and text are showing on top of each other. If you run the sample code below the last two messages are showing on top of each other. On the Chrome browser, it is showing correctly.

I even checked and prefixed all my CSS so it works on a different browser but it doesn't seem to be affecting the Safari browser.

Any help would be appreciated. Thanks.

.messages div:first-of-type {
  margin-top: 0 !important;
}

.messages {
  height: 69vh;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}

.profile-image {
  height: 50px;
  width: 50px;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 100%;
  border: 1px solid #efefef;
}

.message {
  white-space: pre-line;
}

@media (max-width: 500px) {
  .messages {
    height: 300px;
  }
  .profile-image {
    height: 30px;
    width: 30px;
  }
  .avatar-circle-sm {
    height: 30px;
    width: 30px;
  }
  .avatar-circle-sm .initials {
    top: 2.5px;
    font-size: 16px;
  }
}

.attachments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 0.8rem;
}

.attachments a {
  color: #0056b3;
  font-weight: bold;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.attachments .upload-preview {
  max-width: 200px;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

.profile-image {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}

.dropdown.settings .dropdown-toggle::after {
  display: none;
}

.dropdown.settings .dropdown-toggle {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  display: none;
}

.msg:hover {
  background: #f3f3f3;
}

.msg:hover .dropdown.settings .dropdown-toggle {
  display: block;
}

.dropdown.settings .dropdown-menu li {
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.dropdown.settings .dropdown-menu li i {
  width: 20px;
}

.dropdown.settings .dropdown-menu li:hover {
  cursor: pointer;
  background: #f1f1f1;
}

.messages {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.files-container {
  max-height: 235px;
  overflow: auto;
}

.msg {
  margin: 0 1.5rem;
}

.date-row {
  background: #F7F7F7;
  padding: 5px 20px;
}

.messages {
  position: relative;
}

.date-row-fixed {
  background: #F7F7F7;
  padding: 5px 20px;
  position: fixed;
  width: 100%;
  z-index: 10;
  display: none;
}

@media (max-width: 500px) {
  .msg {
    margin: 0 0.5rem;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.attachments:before,
.attachments:after,
.d-flex:before,
.d-flex:after {
  content: normal;
}

.attachments div {
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}






  
    
      
        
           Messages - Safari Test 
        
          
            Thursday, April 2, 2020
            
              
                
                  
                
              
              
                
                  User 2
                  
                    
                      
                      

                         Delete
                         Quote
                      
                    
                    4:51 PM
                  
                
                Hello 
                
                  
                
                
              
              
            
            
              
                
                  
                
              
              
                
                  User 1
                  
                    
                      
                      
                         Quote
                      
                    
                    5:03 PM
                  
                
                Hello 
                
                
              
            
            
              
                
                  
                
              
              
                
                  User 2
                  
                    
                      
                      

                         Delete
                         Quote
                      
                    
                    8:29 PM
                  
                
                hi. This is a test message Testing 123 
                
                  
                
                
              
              
            
            
              
                
                  
                
              
              
                
                  Testing another message 123 
                  User 2
                  
                    
                      
                      

                         Delete
                         Quote
                      
                    
                    8:29 PM
                  
                

                
                  
                
                
              
              
            
            Friday, April 3, 2020
            
              
                
                  
                
              
              
                
                  User 1
                  
                    
                      
                      
                         Quote
                      
                    
                    9:17 AM
                  
                
                JE 
                
                
              
            
            
              
                
                  
                
              
              
                
                  User 2
                  
                    
                      
                      

                         Delete
                         Quote
                      
                    
                    10:26 PM
                  
                
                this is some text 
                
                   dog1.jpg 133.63 KB
                                            
                                            
                                                
                                            
                                        

                  
                
                
              
              
            
            
              
                
                  
                
              
              
                
                  some text and 2 images 
                  User 2
                  
                    
                      
                      

                         Delete
                         Quote
                      
                    
                    10:26 PM
                  
                

                
                   dog3.jpg 176.37 KB
                                            
                                            
                                                
                                            
                                        

                   dog2.jpg 81.61 KB

Flexbox layout breaking on Safari Browser

0 Answers