Updates to Notebook Cell output causes abrupt flashing/flickering in notebooks and interactive window

1. python -m pip install livelossplot
2. Run this code https://github.com/microsoft/vscode-jupyter/blob/b4a3e1d13446c27b0bedf66272b08f5e13ace57f/src/test/datascience/liveloss.py
3. Observe some jarring flashing behavior as the plot updates

The visual effect is exacerbated for interactive window because auto scrolling is done in VS Code core, but the issue is also present for notebooks (abrupt flashing as the plot disappears and gets recreated)

In classic Jupyter there’s no such flashing. The output updates are smooth:

[dd-trafo]

@rebornix Any progress on this issue? Progress bars like that of @DonJayamanne cause a strobe-like flickering due to constant redraws.

[rebornix]

Spent the whole afternoon digging into this and finally found the root cause: the flash is caused by overflow: hidden. Right now there is no primitive for “replace output” in the webview layer so we will always perform a remove and then add DOM operation. The remove will make the height of the container to be zero and since it has overflow: hidden, we are not going to see anything inside the output container. The next add enlarges the container and becomes visible. Somehow the browser doesn’t optimize for this case and always “flashes”.

The overflow: hidden was added to ensure that we see minimal overlap of outputs and code editors. Apparently it comes with a cost 😉