发表新帖
发表新帖

overflow-y not working in safari inside a modal

后端 未结
关注
10 1007
攒了一身酷
攒了一身酷 2020-12-29 03:04

Ok here is the html:


    

              相关标签:
       

        

          10条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  心在旅途        
                
              
    
                            
    
                2020-12-29 03:39
              
    
            
    
            
    
                                                                       

    If none of the solutions work you could try flex: 1 1;  This has cross-browser support.  
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  臣服心动        
                
              
    
                            
    
                2020-12-29 03:41
              
    
            
    
            
    
                                                                       

    Check Your Version of Safari Browser. And match with criteria given below :
    


      

    1. Available in Safari 3.0 and later.
      2. 

    2. Available in iOS 1.0 and later.
      3. 

    


    if you're against the conditions then get upto following measures:
    


      

    1. Apply ClearFix 
      


      .clearfix:after {visibility: hidden;}
      2. 

    


    Reason: Setting overflow doesn't clear the float at the element
    


    OR
    


      

    1. Set Position of element relative at root/body level like this :
      


      body { position:relative; overflow-x:hidden; }
      2. 

    


    Note: Apply only one of them.
    


    Thanks & cheers
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  梦谈多话        
                
              
    
                            
    
                2020-12-29 03:42
              
    
            
    
            
    
                                                                       

    I don't have any IOS product to verify this, but it seems like overflow: auto is a known Safari bug.
    


    Try this:
    


    #filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  梦谈多话        
                
              
    
                            
    
                2020-12-29 03:45
              
    
            
    
            
    
                                                                       

    Code for using two nested divs to show vertical scroll bar only.
    


    <!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题