Chrome/Safari line-height bug on <input>

[Dremora]

Chrome and Safari seem to have a minimum line-height on an <input> of ~115% of font-size. This means that if <input> has a font-size of 10px and no padding/border, its minimum height would be 12px, regardless of how small the line-height is. The only way to override this is to set height explicitly which will make the browser ignore line-height and allows for smaller values.

Take a look at the following styles (or check out this codepen):

const styles = StyleSheet.create({
  input: {
    padding: '5px',
    fontSize: '10px',
    lineHeight: '10px',
    height: '20px'
  }
}

<TextInput style={styles.input} />

This will create a div with combined padding of 10px, and an input with height = 12px and not 10px, as expected. The text inside <Input> doesn't appear centered.

By passing height to <input> we seem to be able to override the minimum line-height. In #138, I have proposed moving padding and border properties to the <input> itself. Here I'm proposing to move height there as well (and I guess min-height and max-height).
If the height is big enough there should be no visual changes. However, in the example from above, this will make sure that the text is centered.