Bug 260899

Summary: Input datetime-local with display: inline-block and a big line-height shows the widget aligned to the top
Product: WebKit Reporter: collimarco91
Component: FormsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: cdumez, karlcow, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: macOS 13   
Attachments:
Description Flags
rendering in Safari, firefox, chrome
none
rendering in Safari, firefox, chrome
none
testcase none

Description collimarco91 2023-08-30 02:56:48 PDT 
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?
Comment 1 Karl Dubost 2023-08-30 04:46:31 PDT 
collimarco91: It would help if you could provide a minimal test case. Thanks.
Comment 2 Karl Dubost 2023-08-30 04:51:08 PDT 
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?
Comment 3 collimarco91 2023-08-30 05:44:22 PDT 
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
Comment 4 Radar WebKit Bug Importer 2023-09-06 02:57:13 PDT 
<rdar://problem/115046747>
Comment 5 Karl Dubost 2023-09-19 23:17:57 PDT 
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.
Comment 6 Karl Dubost 2023-09-19 23:18:40 PDT 
Created attachment 467780 [details]
testcase

The test case