Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

14.0.0: Element being incorrectly seen as visible when it is not visible #30922

Open
jennifer-shehane opened this issue Jan 21, 2025 · 5 comments · May be fixed by #30934
Open

14.0.0: Element being incorrectly seen as visible when it is not visible #30922

jennifer-shehane opened this issue Jan 21, 2025 · 5 comments · May be fixed by #30934
Labels
topic: visibility 👁 type: bug v14.0.0 🐛 Issue present since 14.0.0

Comments

@jennifer-shehane
Copy link
Member

Current behavior

Starting in 14.0.0, we have a situation where an element is failing a .should('not.be.visible') check when the element is not physically visible.

Desired behavior

This element should not be seen as visible.

Test code to reproduce

index.html

<!DOCTYPE html>
<html>
<body>
  <div style="display: grid; grid-template-columns: 332px 1fr; grid-template-rows: 62px 1fr;">
    <div style="overflow-y: auto;">
      <div style="height: 297px; position: relative;">
        <div style="height: 96px; position: absolute; left: 0; top: 0;">
          <a href="">
            test test-1
          </a>
        </div>
        <div style="height: 36px; position: absolute; left: 0; top: 96px; background-color: red;">
          <a href="">
            test test-2
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

spec.cy.js

it('test 1', () => {
  cy.visit('index.html')
  cy.contains('test-2').should('not.be.visible')
})

13.17.0

Image

14.0.0

Image

Cypress Version

14.0.0

Node version

Operating System

Debug Logs



Other


No response

      		
    

      
  





        



            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @jennifer-shehane
jennifer-shehane




          added
  the 

  v14.0.0 🐛

  Issue present since 14.0.0
 label


      Jan 21, 2025

    

  



    

    

      
    

    


      

          @jennifer-shehane
jennifer-shehane




              self-assigned this


      Jan 21, 2025

    

  



    







      

  
      



  

  @jennifer-shehane





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  Author


  


  

    

  





      


        


  
    

      
          
This check is returning false when it shouldn't be. This element is clippable by its parent(s). https://github.com/cypress-io/cypress/pull/29689/files#diff-862874fe8e0535848dd99b7e91e14ee7b1537d6353595858025d34c8b0f7f57bR263

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
            

    

      
    

    


      

          @jennifer-shehane
jennifer-shehane




              removed their assignment


      Jan 21, 2025

    

  








      

  
      



  

  @dan-serendipity





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

      

      
            dan-serendipity
  

      

      

      commented


        Jan 22, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
        
      Loading

      
    
  



    


  





      


        


  
    

      
          
Haven't opened an issue yet since I haven't fully caught up on the release notes, but just wanted to comment here:

in 14.0.0 a bunch of our tests (which pass in the latest version of 13) fail since some radio inputs (which are clearly visible) fail .should('be.visible') checks - these checks succeed when overflow-x: clip is removed from an ancestor div.

(As I say, the inputs are clearly visible and this problem doesn't occur in v13). Posting just in case it's relevant to this issue/helpful in any way; if you want more info/reproduction steps, let me know :)

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
      



  

  @mschile





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
    Contributor


      

  


  

    

      

      
            mschile
  

      

      

      commented


        Jan 22, 2025


      
    


  





      


        


  
    

      
          
Hi @dan-serendipity 👋🏼, would you be willing to try a pre-release binary from this commit to see if it fixes your issue? Thanks!

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
            


    


    

    

      
    

    


      

          @jennifer-shehane
jennifer-shehane




          moved this from Understanding
  to Building
  in Cypress App Priorities


      Jan 22, 2025

    

  








      

  
      



  

  @dan-serendipity





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

  





      


        


  
    

      
          
@mschile Unfortunately it doesn't. The same issue occurs. As before, removing overflow-x: clip from an ancestor div on the page causes the tests to pass again. Here is the most common kind of failure we're getting.

Image
      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
      



  

  @mschile





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
    Contributor


      

  


  

    

      

      
            mschile
  

      

      

      commented


        Jan 22, 2025


      
    


  





      


        


  
    

      
          
Thanks @dan-serendipity, are you able to share or create a reproduction with the html that is causing the issue?

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
          

  

    
  


  

      

    @mschile
mschile



    linked a pull request
    
      Jan 23, 2025
    

    that will
    close
    this issue





  


  

      
   Open

  





  
  

      
        
      
      

  
    
    
  


    1 task
  





  













  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    topic: visibility 👁

  

    type: bug

  

    v14.0.0 🐛

  Issue present since 14.0.0








      

  

    

        

    Projects
  


        




        
  

    

      
          
        Cypress App Priorities
        
    

    

      

            
    Status: Building

              
      

    

    

  







  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    
      

        
    

    Development
  




          
  
Successfully merging a pull request may close this issue.





    


  
          
      fix: visibility issue when parent element is clipping

    
      cypress-io/cypress
    





    
  




      

    

  
      

  

    

      3 participants
    

    

        
          @jennifer-shehane 
        
          @mschile 
        
          @dan-serendipity