Top left icon (.workspace-ribbon.mod-left:before) has an incorrect height on high resolution screens leading to a pixel gap

Bug graveyard
,
1

Steps to reproduce

METHOD 1

  • Use a screen with higher than 1920x1080 (using 2256x1506)
  • Set zoom to 100%
  • Look at the top left icon

METHOD 2

  • Use a screen with 1920x1080 resolution
  • Set zoom to 131% (Command palette -> Zoom In three times)
  • (optional) click off the app to use unfocused colors (easier to see)
  • Look at the top left icon

Did you follow the troubleshooting guide? [Y/N]

Yes, this appears in the Sandbox vault with no plugins, themes, or snippets.

Expected result

No pixel gap

(Example recreated with the inspector on 2256x1506 screen at 100% zoom)
image

(Example recreated with the inspector on 1920x1080 screen at 131% zoom)
image

Actual result

There is a pixel gap
(2256x1506 screen at 100% zoom)
image

(1920x1080 screen at 131% zoom)
image

Environment

SYSTEM INFO:
Obsidian version: v1.3.5
Installer version: v1.3.5
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 0
Plugins enabled: 0

RECOMMENDATIONS:
none

Additional information

I’ve tracked the specific CSS to the .workspace-ribbon.mod-left:before class in the app.css file on line 2084. Its settings are as follows:

.workspace-ribbon.mod-left:before {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--titlebar-background);
  content: " ";
  border-bottom: var(--tab-outline-width) solid var(--tab-outline-color);
  height: calc(var(--header-height) - var(--tab-outline-width));
  width: var(--ribbon-width);
}

The issue with this code is that it doesn’t inherit the * {box-sizing: border-box} from line 828. This could be fixed by changing the height property value and adding a box-sizing declaration to be as follows:

.workspace-ribbon.mod-left:before {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--titlebar-background);
  content: " ";
  border-bottom: var(--tab-outline-width) solid var(--tab-outline-color);
  height: var(--header-height); /* Changed */
  width: var(--ribbon-width);
  box-sizing: border-box; /* Added */
}

This would turn into the following:

image

2

I can’t repro on a 1440p screen.

3

I’ll try and get a way to recreate it on a basic 1920x1080 screen

4

Ah, if you zoom in three times with ctrl + to 131% zoom, you can observe it. You can also click off of Obsidian to make the header more visible. I’ll add these steps to the original post.

Sandbox vault at 131% zoom, 1920x1080 screen

image

5

ok, thanks

6

will be fixed 1.3.7

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.