Hi, I’m working on this little app as an exercise to learn the framework:
https://jeremy9959.observablehq.cloud/sampling/
On a small mobile screen,
the two graphs stack one on top of the other as they should. However, every time the
animation updates, the window scrolls back to the top. As a result you really can’t ever see the second graph.
This is probably more of a general javascript question than an observable one, but is there a way to prevent the graph update ticks from triggering a scroll-to-top action?
On which device and browser do you see that happen?
The good news is that the issue seems to be limited to Safari; both Chrome and Firefox handle scroll anchoring just fine.
Which version of Framework are you using?
v1.8.0.
It didn’t occur to me that this was a bug or I would have been more systematic about reporting all of this.
For what it’s worth, this is the Webkit issue: 171099 – Implement scroll anchoring
I’m not sure what workarounds exist. Perhaps you can interpolate your chart in a container with a fixed height or aspect-ratio (that is, outside of a code block) so that the root height is unaffected when the chart element gets replaced.
I think I will just file this away under “mysterious problem to someday understand” and move on 