jasmine/jasmine.github.io — pull request #2 by tjgrathwell (2013-11-15 06:34:08+00:00)
Title: Fix sizing of jasmine/pivotal SVGs in firefox by changing flexboxy styles to absolute positioning

:warning: Controversial CSS changes ahead :warning:

Since @sheelc and @tjarratt changed the Jasmine/Pivotal logos to SVG in e178fcd7ba9b9bafa061db6444cebd96904fc2fe, they look like this in my Firefox (OSX):

![screen shot 2013-11-14 at 10 12 44 pm](https://f.cloud.github.com/assets/1041691/1548163/713fcfd0-4dbd-11e3-9d64-d5a863950f16.png)

I traced the problem down to the `-moz-box` style on the header elements, which is [apparently the 'old' kind of flexbox](http://css-tricks.com/old-flexbox-and-new-flexbox/). The pixel sizes on the SVGs don't get respected at all in Firefox while that rule is active. (Though I can't find anything in the Firefox bug tracker to prove that this is known to be the case. There could be some other property that, when toggled, fixes everything.)

One possible fix is to upgrade it to the 'new' flexbox, which might understand the SVG better, but then it might look even worse in older browsers. So here I propose this patch that changes the code to use sophisticated CSS `position: absolute` technology.

The only downside of this (other than that the titlebar now has to declare its height) is that when you squish the window down really small it looks like this:

![screen shot 2013-11-14 at 10 26 09 pm](https://f.cloud.github.com/assets/1041691/1548200/d4d95632-4dbe-11e3-90b0-60059ab5e304.png)

But nobody should be setting their viewport that small anyway, unless they're on a phone. Where http://jasmine.github.io/2.0/introduction.html currently looks like this:

![screen shot 2013-11-14 at 10 32 30 pm](https://f.cloud.github.com/assets/1041691/1548224/bbe6a336-4dbf-11e3-931c-ec8f78432ec5.png)

So I don't think it's a big deal.