UI jittering/flickering on fast window resize with `glow`

[cmot17]

trafficstars

Describe the bug When the window is resized at high speed, the UI starts to flicker/jitter.

To Reproduce Steps to reproduce the behavior:

1. Run the eframe example.
2. Resize the window fast.

Expected behavior For the elements of the UI to stay put during resizing

Screenshots Here's a quick screen recording displaying the issue:

https://user-images.githubusercontent.com/25753364/142637840-cae07e3d-e756-4e67-a513-324244b4de72.mov

Desktop (please complete the following information):

• OS: MacOS Montery 12.0.1
• M1 Max SoC - if that's applicable at all

[emilk]

Something similar also happens with egui_web when resizing the browser window.

I would like to get this fix. A good start would probably be to investigate other OpenGL-based GUI/renderers and see if they have the same issue (using winit, glutin and for WebGL canvas).

[emilk]

Interestingly this does not happen with the new egui-wgpu backend (https://github.com/emilk/egui/pull/1564)

[w-ensink]

I have the same issue, also on M1 Max. The same problem arrises when I run some of the examples for imgui-rs.

[yay]

Yeah, it's quite severe. I'm also using this on a mac, but this is not macOS related right? https://user-images.githubusercontent.com/1799756/171958702-ceb8ef14-7181-4e66-88c0-a36b9b57165d.mp4

[amPerl]

seeing this on latest eframe as well, fresh macos monterey on m1 pro

edit: could it be refresh rate shenanigans? edit2: nope, switching to fixed 60hz changes nothing

[paulrouget]

bisect points to: b1fd6a44e82c8cde7fab0b952851d2d2fd785349

[emilk]

@paulrouget Thanks for that bisect! So that's when we switched from glium to glow. I wonder what else changed there. How we set up the swap-chain perhaps? Or something about the event loop?

[paulrouget]

Hmm… I found flickering in previous commits as well. But it's less pronounced. It also depends on what's on screen and the speed the mouse move. Going back to 3e1db880 the jitter happens (less pronounced than b1fd6a4 but still happening). Before that, resizing is not jittery anymore, but instead of jitter, we get stretched UI.

Basically, on my Mac M1, no matter how far back I go, resizing doesn't worked properly.

Enabling wgpu backend fixes the issue.

[wareya]

Resizing windows on Windows 10 using eframe 0.19 on my system results in extremely bad hard flickering, like the window pane is getting cleared white between rendering updates. It happens with both rendering backends. 0.18 doesn't have this problem. Is this another manifestation of this bug or should I open a new issue?

(SEIZURE WARNING. 0.19) https://user-images.githubusercontent.com/585488/191777393-6876e0ce-fbf4-4ff3-a487-e6fd1e541a02.mp4

(0.18) https://user-images.githubusercontent.com/585488/191777412-5d1d87d7-02f1-4c48-91f0-0abe15a04897.mp4

[yay]

@emilk This is still the case in 0.4: https://user-images.githubusercontent.com/1799756/194758951-0d0ab6c1-b608-4425-9fc4-87b87c59f899.mp4 This is the same footage played frame by frame: https://user-images.githubusercontent.com/1799756/194758964-4aedfd50-f0fc-4f4d-a483-422e93c8047a.mp4

It looks like every other frame the layout size is incorrect.

[emilk]

@wareya oh wow, that flickering is really bad 🙈 - please open a separate issue. Does switching to wgpu solve it?

[emilk]

@emilk This is still the case in 0.4:

0.4 of what?

[yay]

Sorry, 0.19. I took this screen capture today by checking out master of https://github.com/emilk/egui

[yay]

Looks like layout is not the only issue and the content can visibly scale before it has a chance to rerender: https://user-images.githubusercontent.com/1799756/199849237-529eb557-d313-4148-89e6-6923c9650e24.mp4 These layout shifts and content scales alternernate without any distinct pattern to it.

[yay]

And the scaling issue is not present with wgpu backend: https://github.com/hasenbanck/egui_example https://user-images.githubusercontent.com/1799756/199847122-332d1ec9-9be9-4471-9529-8c4a0027725e.mp4

Compare to the default glow backend: https://user-images.githubusercontent.com/1799756/199847154-1834c7a0-2786-47b6-8904-ee1b29c03fa2.mp4

Layout issue is there in both backends but comparatively minor (can be noticed by looking at the right-docked sidepanel while dragging the left edge of the window):

(wgpu) https://user-images.githubusercontent.com/1799756/199847811-84e72d0d-3e48-4712-bb02-74d7b54b9965.mp4

(glow) https://user-images.githubusercontent.com/1799756/199847832-c9bc4ccb-27c6-4287-bb5c-9ece1a98bb6e.mp4

[andrew-gropyus]

@emilk did you accidentally close this (edit: or github prematurely closed it) when merging #2280?

Here is a screen capture from the current head, 690dc2d2e8ed2478d5c3e415c7d7f839a7c96503, which shows the same behaviour as the original report:

https://user-images.githubusercontent.com/90681520/201643085-90821c6a-8204-4d00-bf41-26ea84983985.mov

[emilk]

You are right, that was a mistake

[LoganDark]

I forgot to change the PR title after @emilk said that macOS still had the issue, my apologies

I think this could safely be labeled as a macOS-only issue though, if someone can test it on Linux (X11/Wayland) and have the issue not be present

I used to have a Linux install to test with, but my MacBook broke so I don't anymore :(

[kud1ing]

Not sure whether it helps: i've noticed that the effect does not appear with:

• egui examples:
  • hello_world_par (uses wgpu)
  • screenshot (uses wgpu)
• bevy_egui
• egui-miniquad
• rerun (uses wgpu?)

[LoganDark]

Not sure whether it helps: i've noticed that the effect does not appear with:

• egui examples:

  • hello_world_par (uses wgpu)
  • screenshot (uses wgpu)

• bevy_egui

• egui-miniquad

• rerun (uses wgpu?)

this is because the issue is with glow, which is how eframe presents the egui framebuffer to a window. those are all different integrations that do not use glow

[DouglasDwyer]

For me, this jittering effect does occur on Windows 10 with egui-wgpu. When I run the hello_world_par example, resizing the window leads to the same distortions shown in the other videos in this thread. I do not observe any problems with the hello_world or hello_world_simple examples, though.