What browser/OS? I can't replicate the issue you seem to be having.

I plan on having an option to output rem with px fallback code.

Spot on. Perhaps I could have used a different term, but 'baseline' gives visitors an immediate sense of what the tool does.

The purpose is to mimic the effect of a print baseline by enforcing vertical rhythm, and while not perfect, it's often better than none at all.

Good call, I've fixed that.

Same for line-height and margin-bottom?

Ems are more versatile. When increasing the size of all fonts at a particular breakpoint for instance. Instead of having to adjust each font-size property individually you can simply change the font-size of the root element.

Hi, creator here. Unfortunately that's not how CSS works. See here for more information: http://joshnh.com/2012/10/12/how-does-line-height-actually-w...

I read your article. But i am still wondering why you cant shift the pattern so that the lines really line up with the baseline. You can influence the leading via margin or padding and the line-height property, right?

Absolutely, you can hack it on a very individual basis, but this introduces some major problems. For instance, browsers and operating systems all render fonts differently, and as the web is fluid by nature, simply having a sentence break to the next line can be an issue. Also, it can be incredibly different based on the typefaces you are using.

then i still don't get it. When a simple line break would break a horizontal baseline-aligned grid, wouldn't it break a horizontal baseline-plus-some-space-aligned grid?

Although the css prop. "line-heigt" is not implemented in a convenient way, it is still deterministic as I understand from the quoted article:

"This is determ­ined by work­ing out the dif­fer­ence between the line-height and the font-size, divid­ing by 2, and then pla­cing the cal­cu­lated amount of space above and below each line of text."

Only if you are using line-height to hack together a print baseline on the web.

Let me put it this way, if there was a semi-reasonable solution, I'm sure you would have heard about it.

Am I the only one that simply imports hi-res photos into Instagram then?

I just started doing that, but I have a decent amount straight from my phone-camera.

The page shift can be fixed by using:

html { overflow-y: scroll; }

Would you mind sharing some more information on these 'elegant solutions'? I'm yet to experience them.

Opera on my phone automatically zooms whenever you tap a link near another link so you can select with no ambiguity, and I believe Chrome on Android does too:

http://www.androidcentral.com/chrome-android-walkthrough

Safari is notably lagging behind but it's a crappy browser... back button right next to the close tab button suffering from the exact problem you're describing.

You could actually scale it if I had have used ems/rems instead of px. But you are right, an image is the way to go for production.