Closed Bug 1574323 Opened 5 years ago Closed 5 years ago

<input type="search"> widget's corners are round, not square

Categories

(Core Graveyard :: Widget: Android, defect)

Product:
Core Graveyard
Component:
Widget: Android
Platform:
Unspecified
Android
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(firefox-esr68 wontfix, firefox68 wontfix, firefox69 wontfix, firefox70 wontfix)

Status:
RESOLVED WONTFIX
Tracking Flags:
Tracking Status
firefox-esr68 --- wontfix
firefox68 --- wontfix
firefox69 --- wontfix
firefox70 --- wontfix

People

(Reporter: cpeterson, Unassigned)

References

Details

(Whiteboard: [layout:triage-discuss])

Steps to reproduce

  1. Create a document with
<body>
<input type="search">
</body>

Expected behavior

Have the corners of the input being square

Actual behavior

The corners are round.

The only way for a designer to revert to the default rendering of every other browsers is to do border-radius: 0 so basically we are breaking the default expectations with regards to input.

This bug was originally reported in Webcompat issue https://github.com/webcompat/web-bugs/issues/29721 and then Fenix issue https://github.com/mozilla-mobile/fenix/issues/2443.

@ Andreas, this bug is about the styling of <input> widgets differing in Fennec and Chrome. Is this design decision for HTML widgets the responsibility of the Layout team, GV team, or Fenix UX? I'm tentatively sending this bug to the Layout team.

I can reproduce this bug (on my Moto G5 running Android 8.1): I see square corners in Chrome and round corners in Fennec and Fenix, but the round corner effect is very subtle.

Zoom in on the "Search this website" search box the site from the original webcompat report:
https://www.chopstickchronicles.com/pickled-ginger-gari/

Here's a jsfiddle with the simple <input> test case from comment 0:
https://jsfiddle.net/pu6Lkwt1/

status-firefox68: --- → wontfix
status-firefox69: --- → affected
status-firefox70: --- → affected
status-firefox-esr68: --- → affected
Component: Widget: Android → Layout
Flags: needinfo?(abovens)
Whiteboard: [geckoview:fenix] → [layout:triage-discuss]

To clarify, this is true for all text fields, right? (There's nothing specific to search fields, correct?)

I think it's true for buttons as well, in fact. https://jsfiddle.net/dholbert/Lh5wgzuc/ renders with slightly-curved button corners on Fenix vs. with square corners in Chrome.

At least on desktop, our widget styling is controlled by the system theme, with the intent of fitting in. (If the site specifies "-moz-appearance:none" on the form control or adds some other sort of styling e.g. background or border, then we render the widget in a platform-independent look with rectangular corners.)

I'm not sure where the widget styling comes from on Android (if we're actually getting native widget styling as on Desktop, vs. if we designed a set of widgets that we use everywhere by default). But FWIW, I'm seeing other text-entry widgets on Android that have rounded corners -- e.g. search field in gmail and google photos and the Messaging app. So rounded textfields doesn't seem crazy.

Is this actually causing webcompat pain & site breakage? It doesn't sound like it from the first few comments on https://github.com/webcompat/web-bugs/issues/29721 , so this feels pretty low-priority to the extent that it's something we want to change at all...

Component: Layout → Widget: Android
Flags: needinfo?(cpeterson)

FWIW form fields are kinda expected to have subtle differences between browsers/platforms (which sites can override by styling them if they actually need a particular shape/size). They're part of the web (like default-choice-of-font) where we're not promising pixel-perfect identical rendering between browsers.

As a more-extreme example, iOS browsers' textfields/buttons are super rounded by default (the left and right sides are basically half-circles).

So, given that we've had a set of widgets designed that (I think) we're happy with for this platform: unless there's a strong aesthetic and/or functional need to redesign these (site breakage for example), I don't see any strong reason we should take action on this.

The widget design is Ian Barlow's work. I think the last time we did major work on it was bug 705201.

(In reply to Daniel Holbert [:dholbert] from comment #3)

As a more-extreme example, iOS browsers' textfields/buttons are super rounded by default (the left and right sides are basically half-circles).

So, given that we've had a set of widgets designed that (I think) we're happy with for this platform: unless there's a strong aesthetic and/or functional need to redesign these (site breakage for example), I don't see any strong reason we should take action on this.

SGTM. I close this bug as WONTFIX. The difference between the round and square corners is pretty subtle.

Status: NEW → RESOLVED
Closed: 5 years ago
Flags: needinfo?(cpeterson)
Flags: needinfo?(abovens)
Resolution: --- → WONTFIX

FWIW I do recall that our Android widget-border-rounding is a bit more aggressive than on other platforms - see bug 1484841.

(In particular, we do keep rounding the border corners, even for unthemed widgets. That's what bug 1484841 is about.)

See Also: → 1484841
Product: Core → Core Graveyard
You need to log in before you can comment on or make changes to this bug.