Hyper: Text rendering overlap on scroll in a terminal editor

[pariola]

• [x] I am on the latest Hyper.app version

• OS version and name: Ubuntu 18.04.1 LTS
• Hyper.app version: 2.1.0

Issue

I noticed if i use a terminal editor like nano, when i scroll down and happen to scroll back up the texts overlap

Before Scroll

After Scroll

[j-f1]

As a workaround, you can hit ^L to tell Nano to redraw the entire display.

[stu177]

Getting the same on Ubuntu 18.04.1 and Hyper 3.0.0-canary.4

The same behaviour occurs in htop when data is refreshing.

[nilsolofsson]

Same behaviour happens at times in MacOS

[meandmymind]

Same issue.
Hyper 2.1.2 (stable) with no extensions
Ubuntu 18.04 + KDE

[ano95]

Can confirm. Linux Mint 19, hyper 2.1.2.

[voquangphu]

Same here, happens every time I use nano.
MacOS Mojave, version 2.1.2 (stable).

[dickrogers]

Still an issue, happens when paging up/down in nano. Repainting with Ctrl+L fixes the screen until you scroll again, as @j-f1 mentions.
Hyper.app 3.0.0, no plugins, macOS 10.14.4

[Pandawan]

Happens for me too on macOS 10.14.5 with Hyper v3.0.2 (stable).

Many resources online said that you should set the TERM env variable. The default for Terminal.app is xterm-256color which works fine when using it. But when I set it in Hyper.app (both through the .hyper.js config and as an export in the .bashrc), it still breaks.

I've seen multiple issues on GitHub that mention this including #3629, #3491, #3142, #3664, #3596. If there are that many people mentioning this issue, I think that it's a pretty important bug.

Note: This is not a bug specific to nano since other issues (#3629) seem to be mentioning vim.

[stu177]

Yup would be nice if this is addressed. Had this issue for 6 months now and it can be incredibly frustrating.

[stu177]

For me, it seems if you set TERM to screen the issue does not occur.

For example, the issue occurs with:

TERM=xterm nano ~/.bashrc

But not with:

TERM=screen nano ~/.bashrc

Anyone else able to check if this does the same for them?

Possibly narrows the issue down a bit.

[abdilahrf]

its happen with me , no idea how to fix this!

[mnpenner]

TERM=screen nano foo

Still leaves garbage on the screen: https://i.imgur.com/gLfLkRZ.png

[TulioAbreu]

Im having the same problem on Ubuntu 18.04.3 LTS, nano 2.9.3 and Hyper 3.0.2 (stable).

[MarlBurroW]

Workaround for macos + zsh users:
Add the line export TERM=screen to ~/.zshrc

[stu177]

TERM=screen nano foo

Still leaves garbage on the screen: https://i.imgur.com/gLfLkRZ.png

I think this could be a different issue with the screen not clearing on change rather than specifically with scrolling. Are you able to get any issues to occur when scrolling with TERM set to screen?

[mnpenner]

@stu177 Oh, nevermind then. I don't think I've noticed that specific issue. Is there another ticket for what I'm describing? It doesn't happen in bash.exe https://i.imgur.com/Dd5owMn.png Perhaps https://github.com/zeit/hyper/issues/3792

[majordookie]

Same issue here

Opening file in nano (no issues)

Paging down to bottom, artifacts left behind

Exiting nano, artifacts are still there

[Stanzilla]

Can you try with a CI build of current canary or maybe compile one yourself? Or setting webGLRenderer: false, in the config.

[majordookie]

Can you try with a CI build of current canary or maybe compile one yourself? Or setting webGLRenderer: false, in the config.

Tried with canary 3.0.2 and webGL off, the issue still occurs.

[Stanzilla]

No, I meant a CI build of the canary branch

[rwsmith]

Thanks for help @Stanzilla , how do I find the CI build? I also have this issue and would like to help.

[Stanzilla]

Windows https://ci.appveyor.com/project/zeit/hyper/builds/28383913/artifacts
macOS: https://app.circleci.com/jobs/github/zeit/hyper/2831/artifacts

[rwsmith]

Thanks, this fixed it!

[LabhanshAgrawal]

From the last comment it seems like this is fixed, maybe it was an issue with the old xterm?
A new canary for Mac(use dmg) and Linux was released (Windows users can try it out from here)
Can you all please give it a try and confirm if this issue is still there.

[MarlBurroW]

Fixed for me 👍
Tested on 3.1.0-canary.4 (MacOSX 10.13.6)

[LabhanshAgrawal]

Fixed for me 👍
Tested on 3.1.0-canary.4 (MacOSX 10.13.6)

Without the export TERM=screen workaround?

[MarlBurroW]

Yes, I've removed the workaround before my test.
Works with TERM=xterm-256color

[zaneclaes]

@Stanzilla perhaps I'm confused, but the official version is still at 3.0.2 some 6 months after the build... and the CircleCI build page to which you linked no longer has the official download, so I'm unsure how to acquire v3.1.0...

edit releases page _facepalm_

edit 2 Well, after upgrading, Hyper is totally borked. Can't get any key input or anything else to work:

[Stanzilla]

Can you try without any plugins installed?

[zaneclaes]

Commented out all plugins from the config and restarted. No change, except the theme looks different.

Downgraded back to 3.0.2 and everything worked fine. Changed the TERM=screen and the original bug went away.

[Stanzilla]

Interesting, do you have webGL enabled or disabled? Should be an option in the file as well if you don't have it, it's off.

[zaneclaes]

Disabled, AFAICT. Here's my full config with superfluous comments removed & plugins re-enabled:

module.exports = {
  config: {
    updateChannel: 'stable',
    fontSize: 18,
    fontFamily: '"Inconsolata Nerd Font", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    fontWeight: 'normal',
    fontWeightBold: 'bold',
    lineHeight: 1,
    letterSpacing: 0,
    cursorColor: 'rgba(248,28,229,0.8)',
    cursorAccentColor: '#000',
    cursorShape: 'BLOCK',
    cursorBlink: false,
    foregroundColor: '#fff',
    backgroundColor: '#000',
    selectionColor: 'rgba(248,28,229,0.3)',
    borderColor: '#333',
    css: '',
    termCSS: '',
    showHamburgerMenu: '',
    showWindowControls: '',
    padding: '12px 14px',
    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#1DC121',
      yellow: '#C7C329',
      blue: '#0A2FC4',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF',
    },

    shell: '',
    shellArgs: ['--login'],
    env: {},
    bell: 'SOUND',

    visor: {
      hotkey: 'Cmd+\\',
      position: 'right', // or left, right, bottom
    },

    paneNavigation: {
      debug: false,
      hotkeys: {
        navigation: {
          up: 'cmd+shift+up',
          down: 'cmd+shift+down',
          left: 'cmd+shift+left',
          right: 'cmd+shift+right'
        },
        jump_prefix: 'cmd+alt', // completed with 1-9 digits
        permutation_modifier: 'shift', // Added to jump and navigation hotkeys for pane permutation
        maximize: 'meta+enter'
      },
      showIndicators: true, // Show pane number
      indicatorPrefix: '^⌥', // Will be completed with pane number
      indicatorStyle: { // Added to indicator <div>
        position: 'absolute',
        top: 0,
        left: 0,
        fontSize: '10px'
      },
      focusOnMouseHover: false,
      inactivePaneOpacity: 0.3 // Set to 1 to disable inactive panes dimming
    },
  },

  opacity: 0.85,

  plugins: [
    "hyper-pane",
    "hyper-materialshell",
    "hyperterm-visor"
  ],

  localPlugins: [],

  // OSX SPECIFIC
  modifierKeys: {
    cmdIsMeta: false, // default
    altIsMeta: true // default
  },

  // DVORAK Keymap
  keymaps: {
    'tab:new': 'cmd+t',
    'tab:close': 'cmd+shift+w',
    'tab:next': 'cmd+e',
    'tab:prev': 'cmd+shift+e',
    'pane:splitHorizontal': 'cmd+shift+n',
    'pane:splitVertical': 'cmd+n',
    'pane:close': 'cmd+w',
    'editor:undo': 'cmd+z',
    'editor:redo': 'cmd+shift+z',
    'editor:cut': 'cmd+x',
    'editor:copy': 'cmd+c',
    'editor:paste': 'cmd+v',
    'editor:break': 'meta+c',
    'window:close': 'cmd+q',
    'editor:reload': 'cmd+r',
    'pane:next': 'cmd+d',
    'pane:prev': 'cmd+shift+d',

    "editor:break": "cmd+esc",
    "editor:movePreviousWord": "cmd+left",
    "editor:moveNextWord": "cmd+right",
    "editor:moveBeginningLine": "alt+left",
    "editor:moveEndLine": "alt+right",
    "editor:deletePreviousWord": "cmd+backspace",
    "editor:deleteNextWord": "cmd+delete",
    "editor:deleteBeginningLine": "alt+backspace",
    "editor:deleteEndLine": "alt+delete",
  },
};

And ~/.zshrc too fwiw:

export ZSH="$HOME/.oh-my-zsh"

ZSH_THEME="powerlevel9k/powerlevel9k"
ZSH_DISABLE_COMPFIX=false

POWERLEVEL9K_MODE='nerdfont-complete'
POWERLEVEL9K_STATUS_VERBOSE=false
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(ssh context dir status) # os_icon
POWERLEVEL9K_SHORTEN_STRATEGY='truncate_from_right'
POWERLEVEL9K_SHORTEN_DIR_LENGTH=10
POWERLEVEL9K_CONTEXT_TEMPLATE="`hostname -f | sed "s/.local//" | sed "s/.airgc.net//"`"
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(os_icon vcs root_indicator) # context
POWERLEVEL9K_VCS_GIT_HOOKS=(git-remotebranch)

plugins=(
  git
  sublime
  history
  kubectl
  colorize
  colored-man-pages
  zsh-syntax-highlighting
  zsh-autosuggestions
)

source $ZSH/oh-my-zsh.sh

# FZF
if [[ ! -f ~/.fzf.zsh ]]; then
  echo "Installing fzf..."
  git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf
  ~/.fzf/install
fi
source ~/.fzf.zsh

[Stanzilla]

Can you try just removing/renaming your config and see if it works with the default one?

[zaneclaes]

Still no go.

See 3.0.2 running on the right side (second screenshot), and note the commands I ran in order to remove ~/.hyper.js. The left window, 3.1.0, was opened after that was ran. Also, note that the display bug does not happen right away. It appears to boot fine, including the prompt (first screenshot). It even renders the nerdfonts correctly, with the Mac icon on the right. The bug happens _as soon as I press a key or tab away from the window._

[LabhanshAgrawal]

@zaneclaes instead of the releases page get the latest build from the most recent run in this page https://github.com/zeit/hyper/actions?query=event%3Apush+branch%3Acanary

The build on the releases page still had some issues iirc, which've been fixed in the ci build

[zaneclaes]

Okay, I downloaded build #95769080. This version works with the default config file, but did not work with my config file. So I removed everything one at a time and isolated the problem to the nerdfonts. Specifically, the fontFamily line in the config causes the bug.

module.exports = {
  config: {
    fontFamily: '"Inconsolata Nerd Font", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
  },
};

[LabhanshAgrawal]

@zaneclaes Can you also try once with ligatures disabled, set disableLigatures: true in config.

[zaneclaes]

That fixed it! Thanks @LabhanshAgrawal — fyi the nano pagination bug is confirmed fixed with this too (I disabled the TERM=screen export).

[JoeEarly]

This should make it for 3.1.0 release?

[LabhanshAgrawal]

@zaneclaes Can you reply with the link from where you downloaded the font, I want to try and reproduce the issue, so that we might not need to disable ligatures for it.

[zaneclaes]

It's part of the Nerd Fonts Package. IIRC I may have built it from source, but the first URL appears to have a much more modular user-friendly approach than when I first started using Nerd Fonts years ago.

[JoeEarly]

Is this fixed and live?

[LabhanshAgrawal]

You can download a ci build , it isn't released yet.

[deanhouseholder]

I was able to fix this!

I just compiled the source code from scratch. I cloned the canary branch and followed the instructions on the github readme: https://github.com/vercel/hyper

I believe the problem was with the xterm.js npm package and has been fixed there but because Hyper has not been re-compiled and released since May 2019, the fix has not been distributed.

My working build is 3.1.0-canary.4.