Anti-aliased border (change between 1.89.7 and 1.92.9b) #9577

New issue

Closed

opened 2026-10-09 18:10:15 +00:00 by ypujante · 0 comments

ypujante commented

2026-10-09 18:10:15 +00:00

(Migrated from github.com)

Version/Branch of Dear ImGui:

Version 1.92.9b Branch: docking

Back-ends:

imgui_impl_glfw.cpp + imgui_impl_wgpu.cpp

Compiler, OS:

macOS / clang 21

Full config/build information:

// (Copy from the next line. Keep the ``` markers for formatting.)

Dear ImGui 1.92.9b (19291)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=201703
define: __APPLE__
define: __GNUC__=4
define: __clang_version__=21.0.0 (clang-2100.3.34.2)
define: IMGUI_HAS_VIEWPORT
define: IMGUI_HAS_DOCK
IM_ASSERT: runs expression: OK. expand size: OK
--------------------------------
io.BackendPlatformName: imgui_impl_glfw (3501)
io.BackendRendererName: imgui_impl_wgpu (WGPU, Native)
io.ConfigFlags: 0x00000080
 DockingEnable
io.ConfigDpiScaleFonts
io.ConfigViewportsNoDecoration
io.ConfigViewportsNoDefaultParent
io.ConfigDockingWithShift
io.ConfigMacOSXBehaviors
io.ConfigNavCaptureKeyboard
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigWindowsMoveFromTitleBarOnly
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x0000181E
 HasMouseCursors
 HasSetMousePos
 PlatformHasViewports
 HasMouseHoveredViewport
 RendererHasVtxOffset
 RendererHasTextures
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,128
io.Fonts->FontLoaderName: stb_truetype
io.DisplaySize: 1280.00,720.00
io.DisplayFramebufferScale: 2.00,2.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

Details:

I have included a screenshot (very zoomed in) below to demonstrate the differences between 1.89.7 (right side) and 1.92.9b (left side).

The border around a button is generated with:

    ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0);
    ImGui::PushStyleColor(ImGuiCol_Border, ImGui::GetStyle().Colors[ImGuiCol_Text]);

They looks very different. Before it was sharp and clean. Now it is very anti-aliased resulting in a much duller image when rendered at normal zoom. I did try to use style.AntiAliasedLines = false which results in the second screenshot uploaded and shows that there is a missing pixel in the corners.

Also more subtle, but also contributing to the more duller look, is more anti-aliasing on the font itself. For example the "t" in the word "Front" has a lot more grey pixels now than it used to.

For the font, I know there was a big change in 1.92.0 and I have adapted my code (before, I was loading my font at a fontScale * size, and then using io.FontGlobalScale = 1.0f / fontScale. Now I just set style.FontSizeBase to size and io.ConfigDpiScaleFonts = true). That might explain the difference. That being said, the text was more readable before at normal zoom level.

Screenshots/Video:

1.92.9b Left Side vs 1.89.7 right side

1.92.9b with `style.AntiAliasedLines = false`

Minimal, Complete and Verifiable Example code:

This is the code I use to render the text radio buttons:

template<typename T>
bool TextRadioButton(char const *iLabel, T *ioValue, T iTrueValue, const ImVec2& size = ImVec2(0, 0))
{
  auto res = false;
  if(*ioValue != iTrueValue)
  {
    ImGui::PushStyleVar(ImGuiStyleVar_Alpha, ImGui::GetStyle().DisabledAlpha);
    if(ImGui::Button(iLabel, size))
    {
      *ioValue = iTrueValue;
      res = true;
    }
    ImGui::PopStyleVar();
  }
  else
  {
    ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0);
    ImGui::PushStyleColor(ImGuiCol_Border, ImGui::GetStyle().Colors[ImGuiCol_Text]);
    ImGui::Button(iLabel, size);
    ImGui::PopStyleColor();
    ImGui::PopStyleVar();
  }
  return res;
}

/// then in main.cpp
      static int a = 0;
      TextRadioButton("Front", &a, 0);
      ImGui::SameLine();
      TextRadioButton("Back", &a, 1);

Note that you can also reproduce the border problem by going to Demo / Tools / Style Editor. Select the FrameBoder checkbox which adds the border to all widgets... then toggle the Rendering/Anti-Aliased line toggle on and off to see how much sharper/duller it looks. It is less pronounced because the border is not white. But if you change the Border color to white in the color editor, then this reproduce the problem without adding any code...

### Version/Branch of Dear ImGui: Version 1.92.9b Branch: docking ### Back-ends: imgui_impl_glfw.cpp + imgui_impl_wgpu.cpp ### Compiler, OS: macOS / clang 21 ### Full config/build information: // (Copy from the next line. Keep the ``` markers for formatting.) ```cpp Dear ImGui 1.92.9b (19291) -------------------------------- sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20 define: __cplusplus=201703 define: __APPLE__ define: __GNUC__=4 define: __clang_version__=21.0.0 (clang-2100.3.34.2) define: IMGUI_HAS_VIEWPORT define: IMGUI_HAS_DOCK IM_ASSERT: runs expression: OK. expand size: OK -------------------------------- io.BackendPlatformName: imgui_impl_glfw (3501) io.BackendRendererName: imgui_impl_wgpu (WGPU, Native) io.ConfigFlags: 0x00000080 DockingEnable io.ConfigDpiScaleFonts io.ConfigViewportsNoDecoration io.ConfigViewportsNoDefaultParent io.ConfigDockingWithShift io.ConfigMacOSXBehaviors io.ConfigNavCaptureKeyboard io.ConfigInputTextCursorBlink io.ConfigWindowsResizeFromEdges io.ConfigWindowsMoveFromTitleBarOnly io.ConfigMemoryCompactTimer = 60.0 io.BackendFlags: 0x0000181E HasMouseCursors HasSetMousePos PlatformHasViewports HasMouseHoveredViewport RendererHasVtxOffset RendererHasTextures -------------------------------- io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,128 io.Fonts->FontLoaderName: stb_truetype io.DisplaySize: 1280.00,720.00 io.DisplayFramebufferScale: 2.00,2.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 ``` ### Details: I have included a screenshot (very zoomed in) below to demonstrate the differences between 1.89.7 (right side) and 1.92.9b (left side). The border around a button is generated with: ```cpp ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0); ImGui::PushStyleColor(ImGuiCol_Border, ImGui::GetStyle().Colors[ImGuiCol_Text]); ``` They looks very different. Before it was sharp and clean. Now it is very anti-aliased resulting in a much duller image when rendered at normal zoom. I did try to use `style.AntiAliasedLines = false` which results in the second screenshot uploaded and shows that there is a missing pixel in the corners. Also more subtle, but also contributing to the more duller look, is more anti-aliasing on the font itself. For example the "t" in the word "Front" has a lot more grey pixels now than it used to. For the font, I know there was a big change in 1.92.0 and I have adapted my code (before, I was loading my font at a `fontScale * size`, and then using `io.FontGlobalScale = 1.0f / fontScale`. Now I just set style.FontSizeBase to `size` and `io.ConfigDpiScaleFonts = true`). That might explain the difference. That being said, the text was more readable before at normal zoom level. ### Screenshots/Video: #### 1.92.9b Left Side vs 1.89.7 right side <img width="1119" height="587" alt="Image" src="https://github.com/user-attachments/assets/f87517e1-d395-4bb6-bb3f-87e44af20993" /> #### 1.92.9b with `style.AntiAliasedLines = false` <img width="393" height="275" alt="Image" src="https://github.com/user-attachments/assets/f0e67d6c-8b22-486a-9c18-8f7bc7b4c62b" /> ### Minimal, Complete and Verifiable Example code: This is the code I use to render the text radio buttons: ```cpp template<typename T> bool TextRadioButton(char const *iLabel, T *ioValue, T iTrueValue, const ImVec2& size = ImVec2(0, 0)) { auto res = false; if(*ioValue != iTrueValue) { ImGui::PushStyleVar(ImGuiStyleVar_Alpha, ImGui::GetStyle().DisabledAlpha); if(ImGui::Button(iLabel, size)) { *ioValue = iTrueValue; res = true; } ImGui::PopStyleVar(); } else { ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0); ImGui::PushStyleColor(ImGuiCol_Border, ImGui::GetStyle().Colors[ImGuiCol_Text]); ImGui::Button(iLabel, size); ImGui::PopStyleColor(); ImGui::PopStyleVar(); } return res; } /// then in main.cpp static int a = 0; TextRadioButton("Front", &a, 0); ImGui::SameLine(); TextRadioButton("Back", &a, 1); ``` Note that you can also reproduce the border problem by going to Demo / Tools / Style Editor. Select the FrameBoder checkbox which adds the border to all widgets... then toggle the Rendering/Anti-Aliased line toggle on and off to see how much sharper/duller it looks. It is less pronounced because the border is not white. But if you change the Border color to white in the color editor, then this reproduce the problem without adding any code...