Broken position after viewing snapshots with elements with transform

[kaluger-roman]

Current behavior

Elements with css property transform lose their position after cypress interactions (i.e. get, trigger("mousedown") etc).

state before interactions

state after interactions

as you can see, the block moved to the corner.

But if we look into console and disable/enable transform property checkbox on that element, it would be displayed properly

Desired behavior

Elements shouldn't loss their actual position

Test code to reproduce

simple react component

const App = () =>  (
   <div id="test" style={{ transform: "translate(50px, 150px)", background: "red", width: "100%", height: "100vh" }}>
    dfdfd
  </div>
  )

cypress test

describe("Movements story", () => {
    it("One node movement", () => {
      cy.visit("http://0.0.0.0:3000")
      cy.wait(5000)
      cy.get("#test").trigger("mousedown")
    })
  })

Cypress Version

12.0.1

Node version

16.17.0

Operating System

macOS 12.3.1

Debug Logs

No response

Other

No response

[emilyrohrbough]

I dug into this a bit and was able to reproduce the behavior you are seeing with Cypress 12.2.0 using this reproduction: https://github.com/cypress-io/cypress-test-tiny/tree/issue-25056.

The updated page from the .trigger('mousedown') seems like correct behavior given the transform style is on an element with height of 100vh and width of 100%. By default, the .trigger('mousedown') will click the center of the element and it will scroll the element into view to do so. You can use the scrollBehavior: false trigger option (i.e. .trigger('mousedown', { scrollBehavior: false })) to prevent the page from scrolling.

I am however noticing a different issue with snapshots with this example when the query command (.get()) and/or when the .trigger() action command when the logs are hovered or pinned in the Command Log. I am observing the snapshot is applied and the styles are not correctly restored when the log is unhovered/unpinned. See:

Screen.Recording.2022-12-29.at.10.12.06.AM.mov