Vertical Bracket-Pair not visible

[DirkDeclercq]

Issue Type: Bug

When using Bracket-Pair colorization in a JavaScript file on a function aligned to the left I do not see the vertical line.
If I use a space as indendation (so 1 character to the right) the vertical line comes up.

VS Code version: Code 1.62.2 (3a6960b, 2021-11-11T20:56:38.428Z)
OS version: Windows_NT x64 10.0.19042
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz (12 x 2592)
GPU Status	2d_canvas: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled skia_renderer: enabled_on video_decode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	31.77GB (14.51GB free)
Process Argv	--folder-uri file:///c%3A/Dev%20Learning/Udemy/JavaScript%20-%20The%20Complete%20Guide%202021%20%28Beginner%20%2B%20Advanced%29/04-control-monster-killer-starting-project --crash-reporter-id 7d10d3bc-bb4a-452c-9722-1f26a164d34d
Screen Reader	no
VM	0%

Extensions: none

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythontb:30283811
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscoreces:30384385
pythondataviewer:30285071
vscod805:30301674
pythonvspyt200:30340761
binariesv615:30325510
bridge0708:30335490
dockerwalkthru:30377721
bridge0723:30353136
pythonrunftest32:30373476
pythonf5test824:30373475
javagetstartedt:30391933
pythonvspyt187:30373474
vsqsis400:30386382
vsaa593:30376534
vssld246:30386377

[gjsjohnmurray]

Not happening for me (tested with a .ts rather than a .js, but I wouldn't expect that to be significant)

[DirkDeclercq]

Indeed, .js or .ts doesn't make any difference. But on my system still not visible.

[DirkDeclercq]

Found the source of the problem : I had a 'Custom Scale Settings' of 105% (cfr. working with an UltraWide monitor of 3840 x 1600 pixels)
If I put my 'Custom Scale Settings' in back to 100% the vertical-line becomes visible.
It works also when I use a value of 106%.

[alexdima]

Here's a summary of my understanding in this area:

• when using a window.zoomLevel value which is non zero, or when using the scaling feature in Windows, Chromium internally creates a zoom factor, perhaps something like 1.25.
• we paint all our <div>s at integer coordinates and with integer widths and heights on our side.
• but Chromium begins multiplying all our integers with the zoom factor.
• this causes the nice integers to become floats and at one point there will be rounding errors or situations where a certain integer, based on how it aligns will round up or down and introduce a gap or jitter, etc (e.g. imagine a segment from 150-151 becoming 160.55-161.45 which will be rounded to 161-161, etc).

If you are sensitive about pixel perfect rendering, I recommend:

• close all instances of vscode
• execute code --force-device-scale-factor=1 (this will instruct Chromium to ignore the multiplier scale coming in from Windows). This can be persisted using F1 > Preferences: Configure Runtime Arguments or by modifying the shortcut.
• configure window.zoomLevel: 2 or 3 and then reduce the fontSize and lineHeight. It could be that one of these zoom levels results in a better zoom factor with smaller (or more rare) rounding errors, given how floats are represented.

But that being said, I don't think there is any possible code change that we could do on our side.