fix: issue with font flooding

[ryanthemanuel]

Additional details

This issue resolves a situation where needless font requests get initiated due to adding a new style tag that tries to affect scrolling globally. There are appears to be a bug in chrome where when font face fonts are retrieved via "memory cache" any changes to stylesheets causes them to be re-retrieved. This has performance impacts as it floods CDP with events and it causes unnecessary entries for Test Replay. To resolve this, we try and be more surgical with how we affect scrolling. This issue does not occur with inline styles, so instead of setting something globally, we navigate the hierarchy of the elements and set scrollBehavior to auto if the element is scrollable and has a scrollBehavior of smooth.

Steps to test

There were existing tests to validate the scrollBehavior behavior. This change should not break those.

How has the user experience changed?

n/a

PR Tasks

• Have tests been added/updated?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[cypress]

23 flaky tests on run #51220 ↗︎

0

28134

1345

0

23

Details:

PR comments
Project: cypress	Commit: 6e1647ccda
Status: Passed	Duration: 19:15 💡
Started: Sep 21, 2023 7:29 PM	Ended: Sep 21, 2023 7:48 PM

  runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App: Runs > Runs - No Runs > displays a copy button and copies correct command in Component Testing		Test Replay Output Screenshots

  top-nav.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
... > with no project id > shows "connect project" button after login if no project id is set		Test Replay Output Screenshots

  specs_list_latest_runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		Test Replay Output Screenshots

  debug.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App - Debug Page > shows information about a failed spec		Test Replay Output Screenshots

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test		Artifacts
... > correctly returns currentRetry		Test Replay Output
... > correctly returns currentRetry		Test Replay Output
... > correctly returns currentRetry		Test Replay Output

The first 5 flaky specs are shown, see all 12 specs in Cypress Cloud.

Review all test suite changes for PR #27860 ↗︎

[cypress-bot]

Released in 13.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.3.0, please open a new issue.