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

[joyceerhl]

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:

[DonJayamanne]

Also reported here #132143

Old behavior (no flashes, in webview interactive & webview notebooks)

New behavior
(Note: as this is a gif, the flickering isn't as noticeable).

[TylerLeonhardt]

@DonJayamanne @joyceerhl when you transfer issues, would you mind assigning them to the right person if you know who that is?

[DonJayamanne]

I can still repro this with the same code for the progress bar.

[rebornix]

The progress bar might be a different case, @DonJayamanne can you share the code?

[DonJayamanne]

Install dependencies

%pip install fastprogress

Cell 2

from fastprogress.fastprogress import master_bar, progress_bar
from time import sleep
mb = master_bar(range(10))
for i in mb:
    for j in progress_bar(range(100), parent=mb):
        sleep(0.01)
        mb.child.comment = f'second bar stat'
    mb.main_bar.comment = f'first bar stat'
    mb.write(f'Finished loop {i}.')

[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 ;)

[dd-trafo]

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

[dd-trafo]

Issue mentioned on stackoverflow: https://stackoverflow.com/questions/69037124/vscode-version-1-60-0-changed-interactive-view-to-epilepsy-old-or-web-view-av

[gyohng]

Affects me as well.

[rebornix]

Verifier, please test when you are rerunning cells with outputs, the cell doesn't shrink too early, you can test this with following code

print('hello')
print('world')