Firefox delay when scrolling from parent to child

Question

In firefox only, I noticed that when a parent and child both have overflow: scroll, there is a delay of a few seconds when scrolling from one to the other before the second element registers that it should continue the scroll.

You can see an example here: https://jsfiddle.net/o9jnx0w5/9/

body {
  overflow: scroll;
  height: 300px;
  background: blue;
}

.outer {
  margin-top: 200px;
  height: 300px;
  overflow: scroll;
  background: red;
}

.inner {
  height: 500px;
  position: relative;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

<body>
  <div class="outer">
    <div class="inner">
      Inner Top
      <div class="bottom">
        Inner bottom
      </div>
    </div>
  </div>
</body>

Place your cursor directly above the red div and scroll down. The page body will scroll first and reach the bottom of the page. Then there's a delay of a few seconds, after which the inner div will scroll until you see the text at the bottom of that div. Similar results when scrolling up.

Any known solutions?

Firefox delay when scrolling from parent to child

0 Answers0