Displayed password partially obscured in edit box

[nullvoidptr]

In the add item screen, if one enters a password and then clicks the show password toggle, the password remains partially obscured (the top of the letters is not shown). This is also present in the edit screen and the main unlock screen. However it does not appear to occur when looking at stored entries themselves ... ie where password is not an entry field but a read-only field.

See screenshot below for example.

Running Ubuntu 18.04 with a 4k screen.

Bitwarden (snap):
Version 1.2.0
Shell 1.8.4
Renderer 59.0.3071.115
Node 8.2.1
Architecture x64

[kspearrin]

I wonder if this has something to do with the resolution of the screen.

[nullvoidptr]

It is possible. I don't have an alternate monitor to connect at the moment. However, I did create a fresh Linux user account and logged in (to verify no custom font / X11 / GTK / etc settings were the problem). Saw same behavior. Changed resolution within ubuntu to 1920x 1080 and saw no difference in behavior. Also tried changing the scaling option in ubuntu settings to 200% ... besides making things bigger, it did not change the behavior w/r to obscured text.

[nullvoidptr]

Using the built-in developer tools (thanks for including that) I played around with the CSS for the displayed password in the edit page. Clicking CSS on and off I found the only item that changed the behavior I was seeing is the monospaced style definition. The relevant code (presumably) is autogenerated from src/scss/variables.scss:

$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

Apparently my install does not have any of the named fonts and defaults to generic monospace. If I disable the monospace CSS definition the text shows fine. If I prepend monospace with an installed monospace font it shows ok as well (Tried with "DejaVu Sans Mono" and "FreeMono"). I suspect it is related to whatever default monospace font Ubuntu picks in absence of a defined font name.

It is not completely clear to me what plain-jane monospace points to on my system but experimenting further with the CSS shows the same behavior and appearance when I specify "Liberation Mono" as the first name in the CSS definition so this may be the match.

I would say an appropriate fix might be to add a working Ubuntu monospace font (eg. "DejaVu Sans Mono") to the CDD definition prior to the monospace fallback.

Additionally on my end I might try installing Consolas to see if that fixes things as well.

[dcondrey]

Would removing the explicit line-height set fix this?

[nullvoidptr]

When I enable developer tools and select the password entry box using the inspect element box, it appears the line-height directives inherited from main.css are overridden by a font assignment in "user agent stylesheet":

If I override the line-height normal directive with a specific rule for input#masterPassword (I'm testing on the login/unlock screen) it works for the value 1.4 (similar to 1.42857 used elsewhere). Smaller values like 1.2 still have clipping.

[nullvoidptr]

One additional follow-up ... installing courier via sudo apt install ttf-mscorefonts-installer fixed the issue as the font face changed to the (ugly) courier. At least it isn't cropped.

[dcondrey]

Reference facebook/react-native#7687

[kspearrin]

If you can build from source, I just commited 6e1b442 to explicitly set a line height on form fields. Maybe that will fix it?

[nullvoidptr]

I will try to see if I can build and let you know.

In the meantime, if anyone is looking for an immediate workaround, I added a font alias to Consolas to point to DejaVu Sans. To do so, create the following file at ~/.config/fontconfig/fonts.conf:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <match>
    <test name="family"><string>Consolas</string></test>
    <edit name="family" mode="assign" binding="strong">
      <string>DejaVu Sans Mono</string>
    </edit>
  </match>
</fontconfig>

[nullvoidptr]

Never have dealt with building npm apps and not having luck running npm install after trying different installs of nodejs (10 doesn't seem to work at all, reverted to 8 which is default for ubuntu), yarn, electron-builder, etc. . I think one issue is gyp might need some x11 dev dependencies but not sure which but also there are errors about typescript needing to be <2.7 but it installed 2.9 and some error from desktop-idle.

Don't want to burden this thread with unrelated build issues. I will update if I can eventually get it to build but not sure if I'll be successful. Any possibility of generating a linux package (.deb/tarball/.appImage) and sending to me or attaching to this issue?

[kspearrin]

1.4.0 is now out with this fix. Can you confirm?

[nullvoidptr]

1.4.0 looks good.

Reverted my fontconfig change above., logged out and back in to verify 1.3.0 was still showing expected truncated appearance. Upgraded to 1.4.0 deb and launched. Both login page and individual password info page show full text as desired.