Plot dependent on and above input causes focus shift when adjusting the input

[roualdes]

While developing a more complex page, I found the following quirk and am interested in preventing it from happening. Any help is much appreciated. A reproducible example follows a short summary.

Suppose there is a plot that depends on an input range, and the input range is further down the page than the plot. If you scroll down to focus on and adjust the input range, the page jumps up towards the plot by an amount I cannot determine. If the plot and the input range are well separated, the focus does not return to the plot; more lorem ipsum is sufficient to see this.

I would prefer the page to not change focus at all. Thanks in advance for your help.

Here's a reproducible example.

```js
display(Plot.plot({
    marks: [
        Plot.dot([{x: 0, y: 1-p}, {x: 1, y: p}],
                 {x: "x", y: "y"}),
    ]
}));
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a enim
eget justo luctus facilisis vitae eget urna. Ut at magna vel mi
elementum consequat at vitae turpis. Nulla porta ullamcorper orci, a
blandit lacus pretium at. Nunc eu mauris odio. Praesent pretium sapien
vitae purus pretium, in mollis metus sagittis. Donec sit amet porta
felis. Nulla eu ligula vel orci iaculis posuere a vel sem.

Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Duis id lobortis turpis. Morbi sit amet
finibus odio. Phasellus molestie odio sit amet diam laoreet, vel
commodo sem sodales. Praesent ipsum dui, auctor eu ex nec, pharetra
dapibus magna. Phasellus ac lorem tincidunt, congue enim a, vehicula
dolor. Nunc est nulla, auctor et libero maximus, luctus fringilla
dui. Mauris dictum pretium eros ut faucibus. Cras ut mauris sit amet
diam aliquet sodales nec id felis. Proin elementum, sem vitae lobortis
suscipit, nulla ipsum tristique nisl, sed molestie ex odio ut
purus. Nullam interdum ultricies tellus, eu efficitur augue ultricies
at. Aenean rutrum fermentum pharetra.


```js
const p = view(Inputs.range([0, 1], {step: 0.1}));
```

[roualdes]

Hm, this does not happen in Firefox. Only in Safari.

[roualdes]

Would this be better moved to an Issue?

Here's a live version https://roualdes.github.io/lecturenotes/poisson, more complicated than the minimal reproducible example above but with the same issue.

It appears to be a WebKit issue, since all browsers on iOS suffer the same issue.

[Fil]

When a node is refreshed, framework removes it from the DOM and replaces it with the new version. Webkit reflows the page in-between for some reason, and suddenly the bottom of the page is in the viewport, which makes it scroll down.

You can mitigate the issue by adding a div at the bottom of the page:

<div style="min-height: 100vh"></div>

alternatively, a style on the body with e.g. body {margin-bottom: 500px}. (I'm not sure about the size we want, btw; should be a lot.)

In both cases it adds some white space at the bottom, which might not be ideal. Maybe we could find a better solution that suits everyone and add it to framework?

[roualdes]

@Fil, thanks! Specifically, thanks for more clearly describing what I'm seeing and for the quick fix. Of course, I'd be happy to see a solution that suits everyone, but your fix works for me.

I don't have the CSS chops to contribute to finding a solution, but I'm happy to file an issue if that would be helpful.