Input datetime-local with display: inline-block and a big line-height shows the widget aligned to the top

We have an input datetime-local with display: inline-block; and it looks awful on Safari (tested on desktop).

The text (date and time) is small and aligned to the top of the input, instead of being vertically centered.

All other browsers like Chrome and Firefox display the input properly.

Can you please fix this?

[Karl Dubost]

collimarco91: It would help if you could provide a minimal test case. Thanks.

[Karl Dubost]

Created attachment 467489 [details]
rendering in Safari, firefox, chrome

With 

data:text/html,<meta charset=utf-8><input type="datetime-local" style="display:inline-block">

aka 

<input type="datetime-local" style="display:inline-block">

I get the following rendering.

What is the issue?
What were you expecting?

Here's the issue:

https://codepen.io/collimarco/pen/JjwXLQP

In particular it seems that the bug is caused by display: inline-block; in combination with line-height

[Radar WebKit Bug Importer]

<rdar://problem/115046747>

[Karl Dubost]

Created attachment 467779 [details]
rendering in Safari, firefox, chrome

ok thanks, here a reduced test case showing what is happening. 

Basically specifying a bigger line-height doesn't modify the position of the date widget.

[Karl Dubost]

Created attachment 467780 [details]
testcase

The test case