scroll-margin-top not working on textarea in chrome based browsers-CodePudding

On my page I have a fixed navigation bar, so I am using scroll-margin-top to avoid anchored jump targets to disappear behind the navigation bar.

This is working fine with all elements, except for <textarea>, which is a problem when doing automated tests in Cypress Electron (a chrome based browser), both Linux and Windows. It works fine in Firefox, also in Cypress Firefox.

See this example with some anchor links to different elements. Works in FF, does not work in chrome based browsers (Edge, Chrome, Electron)

Is this a bug in Chrome? Any way to work around it? (at least for testing in Cypress)

body {
  margin: 0;
  padding: 0;
}

* {
  scroll-margin-top: 6rem;
}

nav {
  background-color: rgb(255, 0, 0);
  top: 0;
  position: fixed;
  width: 100%;
  display: block;
  padding: 1em;
}

li {
  display: inline-block;
  margin-right: 2em;
}

a {
  color: white;
}

section {
  margin-top: 5rem;
  padding: 1em;
}

.filler {
  height: 1000px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>scroll-margin-top</title>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#h1">H1</a></li>
      <li><a href="#text">text</a></li>
      <li><a href="#textarea">textarea</a></li>
      <li><a href="#textarea_wrapper">textarea_wrapper</a></li>
    </ul>
  </nav>
  <section>
    <p>Try this in Firefox and chrome based browsers. "textarea" has issues in chrome based browsers</p>
    <h1 id="h1">H1 heading</h1>
    <p>Any text</p>
    <input type="text" id="text" value="text" />
    <p>Any text</p>
    <span id="textarea_wrapper">
        <textarea id="textarea">Textarea</textarea>
      </span>
    <p >Filler</p>
  </section>
</body>

</html>

CodePudding user response：

You may use this instead.

scroll-padding-top: 6rem;