Status bar does not stick to the bottom of the browser window.

[Zegnat]

Not sure why:

• http://katydecorah.com/css-ruler/

[Zegnat]

Looks like it is caused by -webkit-transform: translate3d(0, 0, 0) on the page’s body. I will have time to set-up a test-case late tonight (CET).

[visnup]

http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue

[Zegnat]

I am working on a fix. All that has to be figured out is the exact height of the statusbar (or cave in and set a height). Then the position can be top: calc(100vh - $height), where $height is the statusbar’s height, to force the statusbar to display depending on the viewport height rather than the containing block.

The following (really bad) CSS has been added to the bottom of div#com-fortnight-status-bar on my machine and seems to display right:

div#com-fortnight-status-bar {
  /* We are setting padding and height, make sure box-sizing is right. */
  box-sizing: content-box !important;
  /* font-size: 8pt = 10.666666px really, but Safari’s computed value is 11px. */
  font-size: 11px !important;
  /* No variable sizing, everything pixels. (Probably, maybe, not necessary?) */
  padding: 2.2px 12px 2.75px !important;
  /* Helvetica Neue size 11px seems to get a 1.1818181818181819 line-height?!?!?!
     http://meyerweb.com/eric/css/tests/line-height/inspect-multi.html */
  line-height: 13px !important;
  height: 13px !important;
  /* Now we can calculate at how many pixels from the viewport top to display. */
  top: calc(100vh - 2.2px - 2.75px - 13px) !important;
}

This seems to be slightly off compared to the current height of the statusbar, and I would love to get it closer to what we currently have before shipping. Should probably start a branch for this.

[visnup]

I was playing with something similar. Could also try using ems in the calculation too.

[Zegnat]

Could also try using ems in the calculation too.

Oh definitely. I just have an easier time visualising with px, and there is no real difference either way as modern browser zooms effect pixels just as much. The real problem is it seems to me that the current statusbar’s height is mostly dependent on the text’s line-height, and a line-height of normal keeps me guessing as to the actual height.

I’ll push a new branch if I figure it out today.

[Zegnat]

I have been going with the viewport height + calc() method for the last 3 days now, and it seems to work except when a horizontal scrollbar is displayed. In that case it draws the statusbar behind the scrollbar. Is this a bug or is vh supposed to ignore browser UI?