Repository navigation
Updates to Notebook Cell output causes abrupt flashing/flickering in notebooks and interactive window #132143
Description
Activity
- changed the title
[-]Livelossplot output rerendering causes abrupt flashing/flickering in notebooks and interactive window[/-][+]Updates to Notebook Cell output causes abrupt flashing/flickering in notebooks and interactive window[/+]on Sep 2, 2021 DonJayamanne commented
on Sep 2, 2021 ContributorMore actionsAlso 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).

Don Jayamanne (@DonJayamanne) Joyce Er (@joyceerhl) when you transfer issues, would you mind assigning them to the right person if you know who that is?
Reacted by Don Jayamanne- addedbugIssue identified by VS Code Team member as probable bugIssue identified by VS Code Team member as probable bug
on Sep 15, 2021 - addedunreleasedPatch has not yet been released in VS Code InsidersPatch has not yet been released in VS Code Insidersinsiders-releasedPatch has been released in VS Code InsidersPatch has been released in VS Code Insidersand removedunreleasedPatch has not yet been released in VS Code InsidersPatch has not yet been released in VS Code Insiders
on Sep 27, 2021 DonJayamanne commented
on Sep 30, 2021 ContributorMore actionsI can still repro this with the same code for the progress bar.
8 remaining items
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 aremoveand thenaddDOM operation. Theremovewill make the height of the container to be zero and since it hasoverflow: hidden, we are not going to see anything inside the output container. The nextaddenlarges the container and becomes visible. Somehow the browser doesn't optimize for this case and always "flashes".The
overflow: hiddenwas added to ensure that we see minimal overlap of outputs and code editors. Apparently it comes with a cost ;)Reacted by Pablo PrietzReacted by dd-trafo and Alexey ZaytsevPeng Lyu (@rebornix) Any progress on this issue? Progress bars like that of Don Jayamanne (@DonJayamanne) cause a strobe-like flickering due to constant redraws.
Reacted by Alexey Zaytsev, David Waterworth, Sebastian Cardona and Ethan HolenReacted by Jan Tuzlić Offermann, Ethan Holen, Patrick Roe and MaxJIssue mentioned on stackoverflow: https://stackoverflow.com/questions/69037124/vscode-version-1-60-0-changed-interactive-view-to-epilepsy-old-or-web-view-av
Affects me as well.
- added a commit that references this issue
on Jan 10, 2023 - addedunreleasedPatch has not yet been released in VS Code InsidersPatch has not yet been released in VS Code Insidersinsiders-releasedPatch has been released in VS Code InsidersPatch has been released in VS Code Insidersand removedunreleasedPatch has not yet been released in VS Code InsidersPatch has not yet been released in VS Code Insiders
on Jan 10, 2023 - addedverification-neededVerification of issue is requestedVerification of issue is requested
on Jan 24, 2023 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')- locked and limited conversation to collaborators
on Feb 24, 2023

python -m pip install livelossplotThe 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: