Sometimes, repeating spaces are stripped out

• I am on the latest Hyper.app version
• I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: macOS, 10.12.1
• Hyper.app version: 0.8.3
• Link of a Gist with the contents of your .hyper.js: N/A, it's the default ocnfig.
• Relevent information from devtools (CMD+SHIFT+I on Mac OS, CTRL+SHIFT+I elsewhere): See below for HTML snippets.
• The issue is reproducible in vanilla Hyper.app: Yeah!

Issue

I experience a weird issue when using weechat with two sidebars. It's probably best if I show you screenshots. This is how it should look like:

And this is how it looks like:

Apparently, sometimes duplicate spaces get striped/merged together. Now, here comes the crazy stuff:

• I was not able to reproduce this issue outside of weechat, although, to be fair, that's pretty much the only ncurses based application I actively use.
• When running this inside a tmux and sending a refresh via tmux refresh-client, the spaces are drawn correctly.

Here is the HTML that's generated for a line that's missing spaces. The first line is "broken", the second line is exactly the same content after a refresh:

<!-- broken --><x-row>                  <span style="color: rgb(88, 88, 88); width: 7.2px; display: inline-block; overflow: visible; position: relative;">│                                                                                                          </span><span style="color: rgb(88, 88, 88); width: 7.2px; display: inline-block; overflow: visible; position: relative;">│</span><span style="color: rgb(174, 129, 255);"> </span><span style="color: rgb(73, 72, 62);">D</span><span style="color: rgb(73, 72, 62);">e</span><span style="color: rgb(73, 72, 62);">n</span><span style="color: rgb(73, 72, 62);">S</span><span style="color: rgb(73, 72, 62);">c</span><span style="color: rgb(73, 72, 62);">h</span><span style="color: rgb(73, 72, 62);">u</span><span style="color: rgb(73, 72, 62);">b</span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span></x-row>
<!-- good   --><x-row>                  <span style="color: rgb(88, 88, 88); width: 7.2px; display: inline-block; overflow: visible; position: relative;">│</span>                                                                                                          <span style="color: rgb(88, 88, 88); width: 7.2px; display: inline-block; overflow: visible; position: relative;">│</span><span style="color: rgb(174, 129, 255);"> </span><span style="color: rgb(73, 72, 62);">D</span><span style="color: rgb(73, 72, 62);">e</span><span style="color: rgb(73, 72, 62);">n</span><span style="color: rgb(73, 72, 62);">S</span><span style="color: rgb(73, 72, 62);">c</span><span style="color: rgb(73, 72, 62);">h</span><span style="color: rgb(73, 72, 62);">u</span><span style="color: rgb(73, 72, 62);">b</span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span><span style="color: rgb(73, 72, 62);"> </span></x-row>

It's pretty easy to spot that, in the broken case, the spaces are inside the span tag that colors the border line. This is bad since this span tag has a width: 7.2px style...

Since I was not able to build a simplified testcase, that's all the information I can provide at this moment. Maybe it's useful for someone.

Start with the generated x-row HTML in the issue and reproduce the layout using weechat in Hyper, comparing normal rendering with tmux refresh-client. Trace why the border span contains spaces and verify that repeated spaces retain their positions without requiring a refresh.