`.visually-hidden` element breaks scroll

[ValeryVS]

Package version

4.54.0

Node version

20

Platform

No response

What steps will reproduce the bug?

When .yfm is inside overflow-y: auto container without position: relative, elements with .visually-hidden are rendered on their position, like there is not scroll. Which leads to additional scroll on top level element.

transform/src/scss/_common.scss

Line 404 in 1664bd9

.visually-hidden {

minimal example

<style>
  body {
    margin: 0;
    height: 100%;
  }
  .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
    border: 0;
    clip-path: inset(100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .wrapper {
    overflow-y: auto;

    height: 100%;
    background-color: #ccc;
  }
  .content {
    border: 1px solid #000;

    background-color: green;
    color: black;
  }
  .placeholder {
    height: 3000px;
  }
</style>
<div>
  <div class="wrapper">
    <div class="content">
      some content
      <div class="placeholder"></div>
      some content
      <div class="visually-hidden">some hidden content</div>
    </div>
  </div>
</div>

What is the expected behavior?

body in example is not scrollable, only wrapper scrollable

What do you see instead?

when wrapper scrolled to the end, the body continues to scroll

Additional information

Consider to add

left: -9999px;
top: -9999px;

to .visually-hidden element.