14.x fails frequently with "element is not visible because its parent has opacity: 0", with fade-in animation

[yktoo]

Current behavior

As of 14.x, Cypress mostly fails tests that include an animated element, with the message:

     AssertionError: Timed out retrying after 4000ms: expected '<div.comentario-dialog-header>' to be 'visible'

This element `<div.comentario-dialog-header>` is not visible because its parent `<div.comentario-dialog.comentario-fade-in>` has CSS property: `opacity: 0`
      at Context.eval (webpack://comentario/./cypress/e2e/embed/login-dialog.cy.ts:235:106)

See this Comentario build for example.

The behaviour is inconsistent and only seems to occur when run without UI. It does not occur:

• If run with cypress open
• With Cypress 13.7.0

It reports the element (in this case, the dialog header) as invisible, although it is perfectly visible:

Desired behavior

There must be no error, the test should consistently pass.

Test code to reproduce

This specific test code:

it('open Signup dialog when enabled', () => {
    openLoginDlg();
    cy.get('@loginDialog').contains('button', 'Sign up here').click();
    cy.get('@root').contains('.comentario-dialog .comentario-dialog-header', 'Create an account').should('be.visible');
});

See the complete spec file here.

Cypress Version

14.2.1

Node version

v22.14.0

Operating System

Linux

Debug Logs

See attachment

Other

cypress.log

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.