Weird movement in Jupyter Notebooks while viewing images.

[livan3li]

Does this issue occur when all extensions are disabled?: Yes

Version: 1.78.0 (user setup) Commit: 252e5463d60e63238250799aef7375787f68b4ee Date: 2023-05-03T20:09:00.748Z Electron: 22.4.8 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.19045 Sandboxed: No

I've reported a bug related jupyter notebook before here. After new release of vs code this below bug happens.

Steps to Reproduce:

img1408-Code-.Mi-580.mp4

1. Open a Jupyter notebook file that contains some images.
2. Try to view images and see what happens.

[amunger]

I'm not seeing this repro
@livan3li - can you try disabling all extensions and opening that same notebook to see if it still repros?
Also check which renderer is being used for the image by selecting 'change presentation' in the output menu

[livan3li]

@amunger I've provided info about you asked in the video.

1. All extensions are disabled
2. It was using 1. as seen in the image and video.
3. I tried other renderer as well to show difference.
4. And another issue is; VS Code is scrolling down own its own when notebook is opened first time and loading of output started. It can be observed below in end of video as well. I cannot hold the page and have to scroll back by myself.

Rnamz4y2zf.mp4

[amunger]

How many images are you displaying there? (I still don't see it with 500, though perf takes a big hit)
Does it repro with a smaller number of images? Like just displaying the same image 10 times.
Do you know if all the images are being displayed? I see some suspicious collapsed borders in between a few.
Can you try profile: create temporary profile and reloading to check if there's a setting causing this? (profile: switch profile to default to switch back)

[livan3li]

@amunger Alright, I have tried the way you told me and created new profile and didnt install anything at all. But it seems that doesnt change.

I dont have a notebook that have few images. The notebook have 618 images as it could be seen in the video before images output says that 1/618, 2/618 .... 618/618. Those are the images is saved in storage after that they are being displayed.

As far as i noticed those movements only occurs when notebook is being loaded. Because if load finishes that movement seem to stop as well.

Another thing is there is something wrong about loading process as it could be seen in the video. I especially didnt use mouse's wheel not to confuse you, i only used scroll bar on the right.

VS Code stops loading/showing images after some point untill i scroll down bottom and if i come back it suddenly appears.

And i wanted to show how google colab loads notebook in the browser.

Colab.mp4

vs_code.mp4

[vscodenpa]

This bug has been fixed in the latest release of VS Code Insiders!

@livan3li, you can help us out by commenting /verified if things are now working as expected.

If things still don't seem right, please ensure you're on version 4649b53 of Insiders (today's or later - you can use Help: About in the command palette to check), and leave a comment letting us know what isn't working as expected.

Happy Coding!

[connor4312]

@amunger are there verification steps for this?

[amunger]

verification steps

1. create a notebook and put a small image in your local workspace
2. add a cell with the code:

from IPython.display import display, Image

for i in range(550):
    display(Image('smallImage.jpeg'))

3. run the cell and wait for completion, (finished for me in a few seconds)
4. save, close, and re-open the notebook

the images might take a bit to all render, but they shouldn't bump up and down once they are visible

[livan3li]

@amunger Alright, I have tried the way you told me and created new profile and didnt install anything at all. But it seems that doesnt change.

I dont have a notebook that have few images. The notebook have 618 images as it could be seen in the video before images output says that 1/618, 2/618 .... 618/618. Those are the images is saved in storage after that they are being displayed.

As far as i noticed those movements only occurs when notebook is being loaded. Because if load finishes that movement seem to stop as well.

Another thing is there is something wrong about loading process as it could be seen in the video. I especially didnt use mouse's wheel not to confuse you, i only used scroll bar on the right.

VS Code stops loading/showing images after some point untill i scroll down bottom and if i come back it suddenly appears.

And i wanted to show how google colab loads notebook in the browser.

Colab.mp4
vs_code.mp4

@amunger Same bug (bumping up and down) still persists for me.
Another thing is loading of images are stuck some point and it's fixed if i scroll down to bottom and come back. I showed and explained the bug which was in vs_code.mp4 video and duration between 00:42-1:20.

Version: 1.79.2 (user setup) Commit: 695af097c7bd098fbf017ce3ac85e09bbc5dda06 Date: 2023-06-14T08:57:04.379Z Electron: 22.5.7 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.19045

[connor4312]

This fix is only on VS Code Insiders right now. It looks like you're still using the stable version.