Skip to content

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

Description

@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

recording (20)

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)

recording (21)

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

recording (22)

Activity

  1. 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
  2. DonJayamanne commented on Sep 2, 2021

    @DonJayamanne
    Contributor

    Also reported here #132143

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

    noflash

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

  3. TylerLeonhardt commented on Sep 2, 2021

    @TylerLeonhardt
    Member

    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?

  4. added 2 commits that reference this issue on Sep 27, 2021
  5. added
    unreleasedPatch has not yet been released in VS Code Insiders
    insiders-releasedPatch has been released in VS Code Insiders
    and removed
    unreleasedPatch has not yet been released in VS Code Insiders
    on Sep 27, 2021
  6. DonJayamanne commented on Sep 30, 2021

    @DonJayamanne
    Contributor

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

  7. 8 remaining items

  8. rebornix commented on Nov 3, 2021

    @rebornix
    Contributor

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

  9. dd-trafo commented on Mar 18, 2022

    @dd-trafo

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

  10. gyohng commented on Nov 4, 2022

    @gyohng

    Affects me as well.

  11. added a commit that references this issue on Jan 10, 2023
    a9a0a30
  12. added
    unreleasedPatch has not yet been released in VS Code Insiders
    insiders-releasedPatch has been released in VS Code Insiders
    and removed
    unreleasedPatch has not yet been released in VS Code Insiders
    on Jan 10, 2023
  13. rebornix commented on Jan 24, 2023

    @rebornix
    Contributor

    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')
    
  14. locked and limited conversation to collaborators on Feb 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

bugIssue identified by VS Code Team member as probable buginsiders-releasedPatch has been released in VS Code Insidersinteractive-windowverification-neededVerification of issue is requestedverifiedVerification succeeded

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions