In my Cypress end 2 end test I get the following error:

This element <h4> is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: hidden, scroll or auto

A parent element has indeed overflow: hidden. This h4 tag is not a direct child but a deep nested element with some containers in between.

On my local the test pass but on the server, in the pipeline it's failing due to above error? How to solve this? And why the test pass on my local but fails in pipeline?

Update:

The assertion in my code:

cy.dataCy('cta-text').should('be.visible');

The HTML looks like this:

<div>
  <div>
    <header>
      <h3 data-cy="title">My banner title</h3>
      <p data-cy="lead">This is the banner lead text.</p>     
     </header>
     <footer>
       <div data-cy="cta">
         <h4 data-cy="cta-text">This is the cta text</h4>
       </div>
     </footer>
  </div>
  <figure data-cy="image">
    <img src="path-to-image">
  </figure>
</div>

The first div is set to overflow: hidden.

Update 2: When I resize my browser window narrower I can see this element disappears. The only thing I don't understand is why on my local the test pass?