component testing: top of iframe sometimes hidden

[lmiller1990]

Current behavior

Sometimes the top of the iframe cannot be seen:

Desired behavior

Can see entire iframe.

Test code to reproduce

This branch does it: #16747

Go to packages/springboard and run yarn cypress:open:ct

Versions

[AnanaMJ]

If you find the component with class="size-container" and add

position: fixed
right: -300px (ajust to whatever looks good for you)

to the element style, does it fix your issue?

I'm seeing something similar locally but this is the only issue that is close enough to what's happening to me

[lmiller1990]

Thanks for the suggestion - I'm more looking for a solution that solves it for everyone out of the box, but it's likely to be something similar to what you are suggesting (some kind of minor CSS adjustment).

[joshwooding]

Any update on a fix/workaround for this?

[elevatebart]

I think @tgriesser made a fix for this that he only committed to 10.0-release.

Tim, would you mind terribly merging your fix into 9.X?

#18649

[joshwooding]

Any update on this? Happy to create a PR with the commit cherry-picked if it helps :)

[elevatebart]

@joshwooding thank you for asking.

No update yet I am afraid. It would really help if you shared a repo where you see the problem and we could test the fix.

[lmiller1990]

If you want to make a PR cherry-picking #18649, I think that would be fine. It would be great if we could find out how to consistently reproduce this problem, so we can verify #18649 actually fixes it.

[joshwooding]

I'll see if I'm able to reproduce this consistently. I know that when I encounter it I can apply #18649 locally and it fixes it.

[joshwooding]

I was able to reproduce it @lmiller1990 I believe it's something to do with the scrolling of the command pane and setting the viewportHeight to above a certain value. My reproduction is here: https://github.com/joshwooding/cypress-react-template

[elevatebart]

I believe the issue happens, on 9.X, under those conditions:

• the AUT needs to scale down because the viewport is too big for the browser window user has open
• the application in the AUT iframe is bigger than the iframe (because of the viewport settings)

In this case, the initial scroll pushes the content above the fold. It does not happen all the time since it is a rendering race condition.
This scrolled content is then made inaccessible by blocking scroll using overflow: hidden.

I believe using overflow: clip instead of overflow:hidden would block this scroll up for good and fix it.

I will review