Hyper: Powerline spacing regression in 3.0.0

Created on 27 Apr 2019  路  23Comments  路  Source: vercel/hyper

  • [X] I am on the latest Hyper.app version
  • [X] I have searched the issues of this repo and believe that this is not a duplicate
  • OS version and name: Windows 10 1809
  • Hyper.app version: 2.1.2 and 3.0.0
  • Link of a Gist with the contents of your .hyper.js: Unmodified except for setting font family and size, and adding hyper-solarized-dark plugin
  • Relevant information from devtools _(CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere)_:
  • The issue is reproducible in vanilla Hyper.app: Yes

Issue


I tried out the latest 3.0.0 canary 8, and there is a significant regression in the display of Powerline arrow symbols. I searched existing issues and found several discussing Powerline font-related issues but none that seemed specific to rendering differences between v2.1.2 and v3.0.0. I am using zsh + oh-my-zsh with the popular agnoster theme. Font does not seem to be an issue -- behavior is the same under Consolas Nerd Font and Fira Code. The spacing / coloring is off significantly in v3 to the point of being distracting. It was never _perfect_ in v2, but it was far better, and identical to vscode so the imperfections are almost certainly an upstream issue for xterm.js. Easiest to demonstrate with screenshots:

hyper-powerline-2 1 2
Hyper v2.1.2

hyper-powerline-3 c 8
Hyper v3.0.0 canary 8

vscode-powerline
VS Code

powershell-powerline
Powershell (perfect rendering)

I have uninstalled the solarized-dark plugin to revert Hyper to stock settings, but this did not have any effect on this issue. Any ideas on what I could do to get v3 at least back to the quality level of v2?

WebGL Renderer

Most helpful comment

This issue seems related to the WebGL rendering, as turning webGLRenderer to false in config seems to revert to hyper v2 behavior

All 23 comments

Confirming this issue. It's persisted now for quite awhile and has made me move away from Hyper for the time being.

EDIT: Windows 10 17763.475 with Meslo LG M DZ for Powerline

Don't know if it matters, but I'm having the same issue on macOS 10.14.3

Same problem here, Windows 10 17134. Font used: Fira Mono for Powerline

Same exact issue, macOS 10.14.4. A way to get back to v2 quality (or better) would be highly appreciated!

Same issue on Ubuntu 18.04.2, with font Roboto Mono for Powerline
Capture d鈥櫭ヽran de 2019-05-06 11-59-39

Same issue, Win10 17763 with Ubuntu Mono derivative Powerline
image

This issue seems related to the WebGL rendering, as turning webGLRenderer to false in config seems to revert to hyper v2 behavior

This issue seems related to the WebGL rendering, as turning webGLRenderer to false in config seems to revert to hyper v2 behavior

I don't see any difference with webGLRenderer: false,
Which OS are you on?

Same issue here on Ubuntu 18.04 using Ubuntu Mono and PowerlineSymbols

image

edit: the solution of ManoelLobo fixes the problem.

Setting webGLRenderer: false worked for me on latest Windows 10. It also restored font ligatures (with the appropriate plugin), which were also broken by the v3 release.

Hi, @andreascmj

Which OS are you on?

I tested both on Ubuntu (OS: Ubuntu 18.04 bionic Kernel: x86_64 Linux 4.15.0-48-generic) as well as Ubuntu on Windows (WSL) (OS: Ubuntu 18.04 bionic [Ubuntu on Windows 10] Kernel: x86_64 Linux 4.4.0-17134-Microsoft)

Hmm, wonder if I need to do something else on macOS. Anyone on mac that have had success with the fix?

Setting webGLRenderer: false on macOS Mojave 10.14.4 worked for me.

Setting webGLRenderer: false DOES revert to older behavior.
However, v2 rendering still has a glyph alignment issue with resizing, causing a 1px "overhang":
image

This issue is also present in webGL rendering, and can be seen in all above images.

Hi, @krothenbaum

Setting webGLRenderer: false on macOS Mojave 10.14.4 worked for me

Can you just share your config file in a gist so that I'm not missing anything super obvious?

Edit: Sorry, I missed something super obvious. I put the webGLRenderer: false at the wrong place in the file. So now I have the same as @el3gy, it works but is back to 1px overhang as in v2.

Even with WebGL enabled if a "transparent" background color is set the render artifacts disappear on my end.

I'm just using #333333ee as my background color here. The terminal obviously isn't transparent, but Powerline is rendering fine:
Screenshot_2019-05-08_12-49-23

I'm just using #333333ee as my background color here. The terminal obviously isn't transparent, but Powerline is rendering fine:

You've got the 1px overhang too

You've got the 1px overhang too

That I do. But the overhang, unfortunately, isn't a regression.

I did the webGLRenderer: false trick and it fixed my fonts, so that's good. The header transparency is still weird though. I don't know if it's related. I'll create a different issue if not.

This is how it looks "all the time."
Screen Shot 2019-05-09 at 17 48 52
However, in opening up the preferences to make the above edit, it went back to 'normal.'
Screen Shot 2019-05-09 at 17 48 44
But it's only when moving focus from Hyper to SublimeText in the context of editing the prefs file. Moving back and forth between apps not in the context of editing Hyper's prefs do not 'fix' the header.

Managed to fix 1px overhang; it was a font issue all along.

Grabbed a better font from this repo and now I'm looking at this (with webGLRenderer: false):

image

For comparison (and to rule out font issues), here's Windows Terminal's rendering of the same font:

image

Using the font from the repo mentioned by @el3gy worked for me on MacOS!

Changed from the Meslo LG M for Powerline to MesloLGM Nerd Font which is the same but without the spacing 馃帀

Can you try with a CI build of current canary or maybe compile one yourself?

Setting webGLRenderer: false on macOS Mojave 10.14.4 worked for me.

It worked also for me on macOS Catalina 10.15.2

Was this page helpful?
0 / 5 - 0 ratings

Related issues

0x80 picture 0x80  路  45Comments

LukeFlynn picture LukeFlynn  路  47Comments

fabianschwarzfritz picture fabianschwarzfritz  路  48Comments

amilajack picture amilajack  路  48Comments

xscheiner picture xscheiner  路  73Comments