Blueprint: Text cursor not centered vertically in Safari browser

[romanr]

Bug report

• __Package version(s)__: 1.3.1
• __Browser and OS versions__: Safari 10.0.1, MacOS Sierra.

Steps to reproduce

1. Type text in TextField

Actual behavior

Text cursor is not centered vertically:

[llorca]

That's pretty weird, the text is vertically centered. Not sure if that counts as a bug...

[romanr]

After some research on the web it appears like recurrent issue for Safari, mobile Safari and even Chrome.
This is fixed by setting line-height: normal in input field css:

input.pt-input.pt-fill {
    line-height: normal;
}

may also be fixed by line-height: 1; or line-height: 100%; however line-height: normal; is considered the best solution.
Let me know if you would accept PR of this.

[giladgray]

I've noticed this issue with how Safari draws cursors--it's deeply inconsistent with other browsers.

[llorca]

We've been using line-height to center the text vertically, but don't remember for which browser or specific use cases.

I'm afraid a change to line-height may break vertical centering in certain contexts, but certainly happy to take a look at this after the holiday or review any PR submitted on the matter 👍

[cmslewis]

@llorca - What if we just use top/bottom padding within the input? Then we can keep line-height normal in all browsers and still have the power to massage the vertical offsets of the text.

[llorca]

We could try, we didn't use padding to begin with because of the inconsistencies between browsers (we ended up with an input of 31px in some cases)

[giladgray]

just studied github's repo search box and here's what i learned:

.centered-input-text {
  font-size: 13px;
  line-height: 20px;
}

[giladgray]

the root cause is that our 14px font-size produces 11px-tall letters, whereas 16px font-size (large) produces 12px-tall letters. the odd height means it can't ever be centered on the whole pixel which causes the off-by-a-few issue in the screenshot above.

so a font-size that produces 10px-high letters of course solves the centering problem.
a reduced line-height solves the safari cursor rendering issue.

(see #371 for original discussion)