Blurry font rendering across middle of screen when maximised

[xandora]

• [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: Ubuntu 19.10
• Hyper.app version: 3.0.2
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/xandora/ccefa3da543e6a47e3efd7e1205f8fa3
• Relevant information from devtools (CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere): N/A (or maybe I just don't know if any of it is relevant)
• The issue is reproducible in vanilla Hyper.app: Is Vanilla

Issue

There is an obvious blurriness to text across the middle third of the screen when Hyper is running maximised. This does not occur when the app window has been resized to less than maximised, or when the app is running in fullscreen mode (F11).

Resized: Maximised: Fullscreen:

[xandora]

This also seems to happen at certain vertical resolution ranges:

• 700px x 245px -> 700px x 263px (9 lines)
• 700px x 585px -> 700px x 605px (27 lines)

I think these are probably related to the breakpoints for number of visible lines, as it only changes from blurry to sharp after an additional line is snapped in.

[yohan-choi-dev]

Oh if you don't mind, I will investigate this issue!

[AnatoleLucet]

Looks like subpixel rendering to me. One dirty way to fix it is to remove the fixed height on the canvas:

css: `
  .xterm canvas {
    height: auto !important;
  }
`,

[linaori]

Just encountered this issue in a maximized state but only appeared on 1 tab. Applying the above CSS "fixed" it.