1

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 class="filler">Filler</p>
  </section>
</body>

</html>
arnep
  • 5,971
  • 3
  • 35
  • 51

2 Answers2

1

You may use this instead.

scroll-padding-top: 6rem;
Anas Mohammad Sheikh
  • 212
  • 2
  • 9
1

I encountered similar issue with scroll-margin-top on chrome, though it worked on firefox.

In fact, what caused the issue was that the element had also an overflow: hidden applied to it from other styles, so I changed the css into this and the issue was gone:

scroll-margin-top: 6rem;
overflow: initial !important;

I found that solution from https://www.bmorecreativeinc.com/scroll-margin-top-not-working-on-chrome/

TebokaRoa
  • 21
  • 3