Clipper vs Table flickering

[ozlb]

Version/Branch of Dear ImGui:

Version v1.91.8, released

Back-ends:

imgui_impl_glfw.cpp + imgui_impl_opengl2.cpp

Compiler, OS:

Windows 11 + MSVC 2022, Linux Debian + GCC

Full config/build information:

Dear ImGui 1.91.8 (19180)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=201103
define: __linux__
define: __GNUC__=12
--------------------------------
io.BackendPlatformName: imgui_impl_glfw
io.BackendRendererName: imgui_impl_opengl2
io.ConfigFlags: 0x00000003
 NavEnableKeyboard
 NavEnableGamepad
io.ConfigNavCaptureKeyboard
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x00000006
 HasMouseCursors
 HasSetMousePos
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1280.00,720.00
io.DisplayFramebufferScale: 1.00,1.00
--------------------------------
style.WindowPadding: 8.00,8.00
style.WindowBorderSize: 1.00
style.FramePadding: 4.00,3.00
style.FrameRounding: 0.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 8.00,4.00
style.ItemInnerSpacing: 4.00,4.00

Minimal, Complete and Verifiable Example code:

This example will reproduce the issue of table "flickering" when using clipper.

{
    ImGui::SetNextWindowPos(ImVec2(374, 0), ImGuiCond_FirstUseEver);
    ImGui::SetNextWindowSize(ImVec2(541, 423), ImGuiCond_Once);
    if (ImGui::Begin("debug")) {
        const ImGuiTableFlags objectContentFlags = ImGuiTableFlags_NoSavedSettings  //peristency (save in ini file the table layout and setting
            | ImGuiTableFlags_ScrollX | ImGuiTableFlags_ScrollY //scroll
            | ImGuiTableFlags_BordersV | ImGuiTableFlags_BordersOuterH | ImGuiTableFlags_NoBordersInBody  //borders
            | ImGuiTableFlags_RowBg  //background color (alternated)
            | ImGuiTableFlags_Hideable
            | ImGuiTableFlags_SizingFixedFit;
        static bool useClipper = true;
        if (ImGui::BeginTable("objectContent", 3, objectContentFlags, ImVec2(0, -25)))
        {
            ImGui::TableSetupScrollFreeze(1, 1);
            ImGui::TableSetupColumn("Name", ImGuiTableColumnFlags_WidthFixed | ImGuiTableColumnFlags_NoHide);
            ImGui::TableSetupColumn("Type", ImGuiTableColumnFlags_WidthFixed | ImGuiTableColumnFlags_None);
            ImGui::TableSetupColumn("Value", ImGuiTableColumnFlags_NoHide);
            ImGui::TableHeadersRow();
			const int K_Rows_Cnt = 100;
            struct MyTableContent
            {
                static void Fill(int start, int end) {
                    for (int i = start; i < end; i++) {
                        ImGui::TableNextRow();
                        ImGui::TableNextColumn();
                        //COLUMN [NAME]
                        ImGui::Text(((i % 20) == 0 ? "ITEM_LONG_NAME_%d" : "ITEM_%d"), i);
                        //COLUMN [TYPE]
                        ImGui::TableNextColumn();
                        ImGui::Text("%s", (i % 20) == 0 ? "string" : "number");
                        //COLUMN [VALUE]
                        ImGui::TableNextColumn();
                        if ((i % 20) == 0)
                            ImGui::Text("%s", "'long description                             '");
                        else
                            ImGui::Text("%d", i);
                    }
                }
            };
            if (useClipper) {
                ImGuiListClipper clipper;
                clipper.Begin(K_Rows_Cnt);
                while (clipper.Step())
                    MyTableContent::Fill(clipper.DisplayStart, clipper.DisplayEnd);
            }
            else
                MyTableContent::Fill(0, K_Rows_Cnt);
            ImGui::EndTable();
        }
        ImGui::Checkbox("use clipper", &useClipper);
    }
    ImGui::End();

}

Here below the clipper continuously recalculate amount of visible rows due to scrollbar that change the amount of available region.

[03240] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03240] Clipper: Step(): display 0 to 1.
[03240] Clipper: Step(): computed ItemsHeight: 17.00.
[03240] Clipper: Step(): display 1 to 21.
[03240] Clipper: Step(): End.
[03240] Clipper: End() in 'debug/objectContent_4108DFE8'
[03241] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03241] Clipper: Step(): display 0 to 1.
[03241] Clipper: Step(): computed ItemsHeight: 17.00.
[03241] Clipper: Step(): display 1 to 21.
[03241] Clipper: Step(): End.
[03241] Clipper: End() in 'debug/objectContent_4108DFE8'
[03242] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03242] Clipper: Step(): display 0 to 1.
[03242] Clipper: Step(): computed ItemsHeight: 17.00.
[03242] Clipper: Step(): display 1 to 20.
[03242] Clipper: Step(): End.
[03242] Clipper: End() in 'debug/objectContent_4108DFE8'
[03243] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03243] Clipper: Step(): display 0 to 1.
[03243] Clipper: Step(): computed ItemsHeight: 17.00.
[03243] Clipper: Step(): display 1 to 20.
[03243] Clipper: Step(): End.
[03243] Clipper: End() in 'debug/objectContent_4108DFE8'
[03244] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03244] Clipper: Step(): display 0 to 1.
[03244] Clipper: Step(): computed ItemsHeight: 17.00.
[03244] Clipper: Step(): display 1 to 21.
[03244] Clipper: Step(): End.
[03244] Clipper: End() in 'debug/objectContent_4108DFE8'
[03245] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03245] Clipper: Step(): display 0 to 1.
[03245] Clipper: Step(): computed ItemsHeight: 17.00.
[03245] Clipper: Step(): display 1 to 21.
[03245] Clipper: Step(): End.
[03245] Clipper: End() in 'debug/objectContent_4108DFE8'
[03246] Clipper: Begin(100,-1.00) in 'debug/objectContent_4108DFE8'
[03246] Clipper: Step(): display 0 to 1.
[03246] Clipper: Step(): computed ItemsHeight: 17.00.
[03246] Clipper: Step(): display 1 to 20.
[03246] Clipper: Step(): End.
[03246] Clipper: End() in 'debug/objectContent_4108DFE8'

Screenshots/Video:

Flickering effect is filtered by screen-capture, it's with much higher frequency in reality.

[ocornut]

Thank you for your report and careful repro code.

Feedback loops of this kind are not specific to tables. Scrolling on both axises tends to amplify them.
Also see #3285 #4539 #7445 #1730. In particular see #3285.

The easiest way to get rid of this is to make scrollbar visibility not alter layout. This may be achieved in two ways:

• make the scrollbar always visible (ImGuiWindowFlags_AlwaysVerticalScrollbar and ImGuiWindowFlags_AlwaysHorizontalScrollbar)
• make the scrollbar invisible (you can still horizontally scroll with e.g. Shift+Wheel).
• make the scrollbar appear over contents, which subsequently requires it to disappear at some point. This is what some modern applications are doing by using invisible scrollbars that appears when you use them. (it's not supported in dear imgui yet).

Note that a commit from February 7 (soon after the 1.91.8 release) made it easier to inject window flags into a table, by doing:

ImGuiContext& g = *GImGui; // or *ImGui::GetCurrentContext();
g.NextWindowData.HasFlags |= ImGuiNextWindowDataFlags_HasWindowFlags;
g.NextWindowData.WindowFlags = ImGuiWindowFlags_AlwaysVerticalScrollbar | ImGuiWindowFlags_AlwaysHorizontalScrollbar;
ImGui::BeginTable(...);

[ozlb]

Thank you and apologize for the duplicate topic

[ocornut]

Don’t worry. Now that I think about it, I think it may be viable to consider an automatic solution to this problem that involve detecting changes of horizontal scrollbar visibility, and heuristically enabling it at some point. I will investigate this.

[ocornut]

Here's a tentative patch:
imgui-dee39f8-Scrollbar stabilize visibility of ScrollbarX when detecting a feedback loop. (#8488, #3285).patch

I'm finding it a little hard to reason about side-effects, but basically this might lock ScrollbarX visibility for longer than necessary, but since the other alternative to avoid this is using ImGuiWindowFlags_AlwaysHorizontalScrollbar it might be ok.

@wolfpld as per #3285, I realize you have other another solution but I would be curious to know if you think this automatic workaround is viable. One caveat is that the "magic" stabilization may not facilitate leading people to understanding what is happening and leading them to alternative solution, but this may be a good compromise.

[ocornut]

Slight alteration which makes it possible to display a log entry when enabled.

imgui-1530c9f-Scrollbar stabilize visibility of ScrollbarX when detecting a feedback loop. (#8488, #3285) (v2).patch

[wolfpld]

@wolfpld as per #3285, I realize you have other another solution but I would be curious to know if you think this automatic workaround is viable.

The best I can find for this is wolfpld/tracy@ecfeb01. IIRC the issue was that some lines were longer than others. With clipper enabled causing a limited range of lines shown the result was that the horizontal scroll bar appeared in some cases, but not other. The degenerate ping-pong case was when the scroll bar appearing caused a long line to be out of view, which changed the visible width, which hide the scroll bar, which then again caused the long line to appear.

I don't know if the above is correlated to this issue, tl;dr, sorry.

[ocornut]

The patch is an attempt to automatically cancel out the ping-pong / feedback loop by detecting it.
It's not perfect in the sense that you will see the ping pong for 8 frames before it stabilizes.

I'd be interested if you can confirm if commenting out your SetNextWindowContentSize() call you can repro the issue, and which this patch you see the stabilization happening after a very short flicker.

To clarify, it's always better to (1) set content width as you did, or (2) enforce scrollbar to be visible at all time, aka use ImGuiWindowFlags_AlwaysHorizontalScrollbar.

So the question for me would be to gauge if this magic stabilization causes more benefits than harm (the potential "harm" would be to relegate this type of issue as a short/small/mysterious problem and let some users not think about it, not incentivizing the user to find and implement the better solution).

[ozlb]

Thank you for your time on this topic.
I did test both patches and in my case it solves the issue and the flickering is acceptable.
If think that this solution with the window flag ImGuiWindowFlags_AlwaysHorizontalScrollbar injection into a table (available in current master version) could probably cover a lot of scenarios.

Here below screenshot of patch #8488 (comment) with log enabled.

anyhow.. the Omar's "elegance" footprint of the 2 key lines are as usually astonishing:

window->ScrollbarXStabilizeToggledHistory = (window->ScrollbarXStabilizeToggledHistory << 1) | ((scrollbar_x_prev != window->ScrollbarX) ? 0x01 : 0x00);
const bool scrollbar_x_stabilize = (window->ScrollbarXStabilizeToggledHistory != 0) && ImCountSetBits(window->ScrollbarXStabilizeToggledHistory) >= 4; // 4 == half of bits in our U8 history.

[ocornut]

Not sure what to make of this last comment 😅
But I went ahead and pushed this as d9dad2f with more comments, and splitting the first line in two steps.

Thanks for your feedback!

[ozlb]

Not sure what to make of this last comment 😅 But I went ahead and pushed this as d9dad2f with more comments, and splitting the first line in two steps.

Thanks for your feedback!

Thank you. The last comment was a compliment!

[wolfpld]

It's not perfect in the sense that you will see the ping pong for 8 frames before it stabilizes.

I'd be interested if you can confirm if commenting out your SetNextWindowContentSize() call you can repro the issue, and which this patch you see the stabilization happening after a very short flicker.

One thought I have is that this may not work well for programs which pause rendering if there's no reason to refresh the screen.

[ocornut]

Very good point. Thought at that point if its paused in either state the flickering is not seen anyhow. It doesn’t seem like a hurtful change.