Bug 204328 - <input> should not honor overflow:scroll/auto
Summary: <input> should not honor overflow:scroll/auto
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-11-18 15:57 PST by Simon Pieters (:zcorpan)
Modified: 2023-10-05 10:31 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Pieters (:zcorpan) 2019-11-18 15:57:17 PST
There is lack of interoperability on what 'overflow' does for <input> elements.
For <input type=file> in particular, Firefox found that they needed to clip overflow also when 'overflow: visible' was set in author CSS.
https://bugzilla.mozilla.org/show_bug.cgi?id=1543477

WebKit allows scrolling <input type=file> when you set overflow: scroll, but Firefox does not.

Meanwhile there are web compat constraints around how <input> does baseline alignment, which only works per CSS for inline-blocks when 'overflow' is visible.

To fix this on the spec side, I've required that input (except for type=hidden and type=image) must ignore 'overflow' and act like visible for vertical alignment, but still clip content. Text entry widgets also support scrolling per spec.

Spec https://github.com/whatwg/html/pull/4840
Test https://github.com/web-platform-tests/wpt/pull/20172

Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=952651
Comment 1 Radar WebKit Bug Importer 2019-11-19 17:28:29 PST
<rdar://problem/57343790>
Comment 2 Ahmad Saleem 2023-10-05 10:31:55 PDT
I think this impact following test case: https://wpt.fyi/results/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html?label=master&label=experimental&aligned&q=overflow

By adding following (similar approach to Blink) in our UA stylesheet:

input[type="search" i], input[type="file" i], input[type="date" i], input[type="time" i], input[type="range" i], input[type="email" i],
input[type="password" i], input[type="month" i], input[type="week" i], input[type="datetime-local" i], input[type="number" i],
input[type="range" i], input[type="color" i], input[type="checkbox" i], input[type="radio" i], input[type="submit" i], input[type="image" i],
input[type="reset" i], input[type="button" i], input[type="tel" i], input[type="url" i],  input[type="text" i] {
    overflow: hidden !important;
}

___

We progress above test case from '70' passes to '97' passes.

@Tim - any thoughts?

I am not able to find test case 'input-all-scrollable.tentative.html' mentioned in PR to WPT from Comment 0.

Although I am not sure, how close we are to Mozilla test case: https://bug1543477.bmoattachments.org/attachment.cgi?id=9058096