Weird Background Color Artifact on macOS Sierra

[PatrickTulskie]

Since upgrading to macOS Sierra, some grey color backgrounds cause a weird block to appear in the window. In my config, I'm using #181818 but it seems to happen with a wide spectrum of grey colors. When I check the color of the box with Color Meter, it comes back as #242424. Also, the box seems to resize as you type text into the field.

Here's a copy of my config:

module.exports = {
  config: {
    fontSize: 12,
    fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
    cursorColor: 'rgba(248,28,229,0.75)',
    cursorShape: 'BLOCK',
    foregroundColor: '#F8F8F0',
    backgroundColor: '#181818',
    borderColor: '#272727',
    css: `
      .hyperterm_main {
        border: none !important;
      }
      .header_header {
        background: #272727 !important;
      }
      .tab_tab {
        border: 0;
      }
      .tab_active::before {
        border-bottom: 2px solid #FD971F;
      }
    `,
    termCSS: `
      ::selection {
        background-color: #ccc;
      },
      background-color: '#181818'
    `,
    padding: '12px 14px',

    colors: {
      black: '#272727',
      red: '#F92672',
      green: '#A6E22E',
      yellow: '#FD971F',
      blue: '#66D9EF',
      magenta: '#AE81FF',
      cyan: '#38CCD1',
      white: '#ffffff',
      lightBlack: '#808080',
      lightRed: '#F92672',
      lightGreen: '#A6E22E',
      lightYellow: '#FD971F',
      lightBlue: '#66D9EF',
      lightMagenta: '#AE81FF',
      lightCyan: '#38CCD1',
      lightWhite: '#ffffff'
    },
    shell: ''
  },

  plugins: ['hyperterm-blink'],
  localPlugins: []
};

HyperTerm 0.7.1
Electron 1.2.8
darwin x64 16.0.0

[PatrickTulskie]

For giggles, I built the current master branch from source and tried it on Sierra. It doesn't do the weird box thing anymore. It does spread out the weird colored box across the screen though seemingly at random though. I can't seem to consistently reproduce it but it's still happening in a different way.

[Greenek]

This is Chromium bug (https://bugs.chromium.org/p/chromium/issues/detail?id=633805) and it's related with non-standard color profiles. To fix it now you can: a) change color profile for that monitor, or b) run hyperterm with --enable-gpu-rasterization.

[PatrickTulskie]

Thanks @Greenek I'll probably do the latter. How do I start hyperterm with that flag on macOS?

[Greenek]

Sorry, I forgot to reply! The easiest way I think is add

app.commandLine.appendSwitch('enable-gpu-rasterization', 'true');

somewhere around app/index.js#19 and rebuild.

[PatrickTulskie]

Awesome thanks @Greenek.

Looks like Chromium Canary builds are now enabling that by default. Any downside to just doing that for Hyperterm by default?

[Greenek]

@PatrickTulskie I'm not sure. GPU rasterization is slower for text and I have seen many reports about problems on Linux (but it's not our problem, yet).

I made a simple test and after enabling GPU rasterization FPS drops from ~30 to ~20 while scrolling. At the screenshot below you can see that shape of the chart is much irregular for GPU raster enabled, but IMO it's hard to notice any difference without counter. Rendered fonts looks the same. But... it's just 5 minutes test in the single environment :)


[PatrickTulskie]

Yeah dropping under 30fps is going to be noticeable. Probably not a good idea to add it as a default flag.

[webgefrickel]

I still have the same issue with Hyper 1.1.0.1408 on macOS 10.12.2 — any ideas on this besides the enable-gpu-rasterization-flag?

[eastcoastcoder]

I think this may be an Electron problem with graphics switching and the iGPU being disabled on MacBook Pros which have dGPUs.
Try my fix, also report back if anyone is having this issue that does NOT have a dGPU.

[Greenek]

It was Chromium bug, fixed long time ago in Electron 1.6.9/Chrome 56. Please close this ticket.