Pixel perfect navbar toggler

[tagliala]

Hi guys,

another opinionated PR, you may want to use another solution (such as use an actual 32px icon).

I've noticed that on non-retina displays, the navbar toggler icon is blurry.

The actual available size of the navbar toggler icon is 30px, but the
SVG uses a 32 unit grid. This commit uses a 30 unit grid and updates
icon accordingly.

The following images shows before and after this PR on non-retina macbook air
1st browser: Chrome 55
2nd browser: Safari 10.0.2
3rd browser: Firefox 50.1.0

[bardiharborow]

Looks great. That's been annoying me for a while now, but I didn't realise it would be this easy to fix. <3

[pvdlg]

I don't know much about SVG...but the size of the icon will depends on the on the base font-size (which now come from the browser settings). So the size icon might change based on user settings.

The font-size for the toggler is 1.25rem and the height is 1.5rem. With a default base font-size of 16px that gives us 1.25 * 1.5 * 16 = 30px. But if the user set his default font-size to 14px then the icon would be 1.25 * 1.5 * 16 = 26.25px.

How would the SVG behave with a height of 26.25px ? Would it be blurry ?

[tagliala]

@vanduynslagerp sorry but I can't answer, I only have a basic knowledge of SVG 🙌 .

It will be probably blurry, I've just tried to force 26.25px icon size

Result (before / after, chrome 55):

[pvdlg]

Either there is no differences or I don't have eyes good enough to see it.
It would make sense to me that the icon will be crisp only when it's rendered size match the SVG size, but maybe not...I really have no idea ¯_(ツ)_/¯

[mdo]

We could make it pixel based perhaps if that'd help, but it might be more difficult to customize in some capacities.

[guylepage3]

I feel as though these are limitations to using rem vs px. We've chosen rem for a reason. Debates like "pixel perfect" display should have come up in the rem vs px debate. If they did not, and I don't recall them coming up, we should have that discussion now. No?