Visjs configurator does unnecessary scrolls in Chrome (not Firefox)

[felixhayashi]

Hi @ dev team,

Please go to the confurator demo (http://visjs.org/examples/network/other/configuration.html) and scroll down – e.g. till physics – and change an input field – e.g change the solver or select a checkbox.

The viewport is scrolled.

This undesired behavior occurs in Chrome v47 (tested on Linux). Doesn't occur in FF (v43)

-Felix

[felixhayashi]

What is strange is that this scrolling only involves form elements that follow the nodes block (e.g. edges). For example:

1. Scroll down till edges.font.size is at the very top of the window. Then change it and a scroll occurs.
2. Do the same for nodes.size – no scroll occurs. everything is fine.

?

[AlexDM0]

I think its because the entire list is remade on each change. height is 0 at a moment and scroll is reset.

[felixhayashi]

Ah, true! in this case it makes sense to save the height of the container div ("vis-network") before recreating the domnode I would say.

var height = container.getBoundingClientRect().height;
container.style["height"] = height + "px";

[felixhayashi]

Nice, tested it and it works :) So after instantiation, when using the configurator, I just add the code above to the configurator container and it doesn't make chrome jump. I think this can be done outside vis so not really a need to fix this in your code imo…

[AlexDM0]

Ok, thats an easy fix for me then :)

cheers!

[felixhayashi]

Ok, thats an easy fix for me then :)

I'll do a PR for your configurator example

[AlexDM0]

tnx!

[felixhayashi]

Ha! turns out this needs an addition to the vis css.

All config items are floating so the overall height is always(!) 0. Regardless of whether rebuild or not! So I need to add a clearfix to the css to retrieve the actual size ;) …will add this to lib/shared/configuration.css in the PR

.vis-configuration-wrapper::after {
  clear: both;
  content: "";
  display: block;
}