Blackout area is offset from where it should be when upgrading to 9.7.0 from 9.5.4

[sandy-farnsworth]

Current behavior

Blackout is not blacking out the specified area in 9.7.0. It seems to be trying, but the blacked out area is offset from where it should be.

This is my blackout area in Cypress 9.5.4:

I am attempting to upgrade to 9.7.0, and the wrong area is being blacked out. The tests haven't changed.

Desired behavior

Blackout the specified area.

Test code to reproduce

     cy.findByAutomationID(`drive`)
        .should(`be.visible`)
        .matchImageSnapshot({ blackout: [`[data-automation-id="drive-item-modified-date"]`] })

Cypress Version

9.7.0

Other

I also tried one or two Cypress 9.6 versions and saw the same behavior there. I am unable to upgrade past 9.5.4 since it breaks my visual tests that use blackout. It seems like blackout is still functioning, it's just blacking out the wrong area on the page. These tests have been working properly with all versions of Cypress since July, 2021.
The tests work great in Cypress 9.5.4.

[AtofStryker]

Hey @sandy-farnsworth. Thank you for creating an issue! Would you be able to provide a reproduction to demonstrate the issue you are running into? I created a reproduction repository here that you are more than welcome to use. I was not able to reproduce it. It looks like you are using something similar to Google Drive, where I tried to create something similar. Here is the screenshot I received:

[sandy-farnsworth]

@AtofStryker I will do that. Did you try with multiple elements?

[AtofStryker]

@AtofStryker I will do that. Did you try with multiple elements?

I did not, but what I will do right now is add a few other docs to the folder to help with your test case.

[AtofStryker]

@sandy-farnsworth I added two more docs to the list. Hopefully this helps!

[sandy-farnsworth]

Thank you.

[sandy-farnsworth]

I am still investigating the issue. I found that when I run my visual tests in the cypress test runner, that blackout is working properly. When I run my tests through CI, which uses the Cypress docker container for 9.7.0, the blackout area is offset. I am trying to track down what is causing that difference.

[jordanhennell]

I have noticed the same issue after upgrading. It appears to due to using jQuery's offset to calculate the top and left position of the blackout element, which returns values relative to the document. But then the blackout element is positioned absolutely.

The current workaround in my project is to set __cypress-blackout elements to position: fixed.

[AtofStryker]

@jordanhennell I wonder if some of this got introduced in v9.6 with the cy.origin PR, since we refactored/changed some of the dimension calculation code. Are you able to provide a reproducible example by chance? I can see how this is a bug, but have had some issues getting it to show up.

[jordanhennell]

Indeed it does look to have been introduced when adding cross origin support. Got a small repro here, where it's attempting to blackout the English label.

cy.visit("https://www.wikipedia.org/")
    .get('.central-featured') // centered (margin: 0 auto) globe with languages around it
    .screenshot({
        blackout: ['[lang=en]']
    });