Vertical rhythm is broken in Chrome/Safari, but works in Firefox and IE (Webkit bug?)

[chopachom]

Hi, I've customised inuit with following variables

$base-font-size:    14px!default;
$base-line-height:  20px!default;

and then I noticed that vertical rhythm doesn't work correctly at Chrome/Safari here is a fiddle http://jsfiddle.net/chopachom/ugXcf/

There I place two <p>s side by side, for the font-size/line-height of the first <p> I used @include font-size(12px); and as you can see lines are going off the scale in Chrome/Safari .

The interesting thing here is that webkit debugger shows in computed styles that the line-height of the first p is 19px, and if I set this line-height (in pixels) to the element's style then everything is aligned properly as it should be.

Webkit bug?

[csswizardry]

This is a result of browser rounding, and not something we can do anything about. As you notice, the computed styles show 19px; this is because WebKit is—in my opinion—pretty responsible and will round any unusual numbers down rather than up (which means that that layouts are less likely to break, merely ‘fall short’.

This article by John Resig explains which browsers do what :)

Cheers, H