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

collimarco91
Reported 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?
Attachments
rendering in Safari, firefox, chrome (114.71 KB, image/png)
2023-08-30 04:51 PDT, Karl Dubost 		no flags
Details
rendering in Safari, firefox, chrome (163.59 KB, image/png)
2023-09-19 23:17 PDT, Karl Dubost 		no flags
Details
testcase (697 bytes, text/html)
2023-09-19 23:18 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2023-08-30 04:46:31 PDT
collimarco91: It would help if you could provide a minimal test case. Thanks.
Karl Dubost
Comment 2 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?
collimarco91
Comment 3 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
Radar WebKit Bug Importer
Comment 4 2023-09-06 02:57:13 PDT
<rdar://problem/115046747>
Karl Dubost
Comment 5 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.
Karl Dubost
Comment 6 2023-09-19 23:18:40 PDT
Created attachment 467780 [details] testcase The test case
Note You need to log in before you can comment on or make changes to this bug.