Closed Bug 785875 Opened 12 years ago Closed 11 years ago

Unable to tap entirety of <input> to obtain focus

Categories

(Firefox for Android Graveyard :: General, defect)

15 Branch
ARM
Android
defect
Not set
normal

Tracking

(fennec+)

RESOLVED WORKSFORME
Tracking Status
fennec + ---

People

(Reporter: ioana.chiorean, Unassigned)

References

()

Details

(Whiteboard: [fennec 15.0])

Attachments

(1 file)

Attached image screenshot
Build ID: 15.0 (2012-08-24) Release Candidate 
Reproducible also on Nightly 17.0a1 (2012-08-27)
Device: Samsung Note; Galaxy Nexus; Galaxy Tab 2
OS: Android 4.0.4

Steps to reproduce:
1. Open Fennec -> Go to www.facebook.com
2. Tap username field (name or phone)
3. Enter some characters 

Expected result:
- All field should be available for introducing characters 

Actual result: 
- the field length is not recognized, characters can be entered only till the middle of the field, where is also present the cancel "x" button. 
- if the characters length is more than this half of field, the text is moved to left.
Keywords: testcase-wanted
Summary: Form fill length is not recognized (cancel "x" in the middle of text input) → Unable to tap entirety of <input> to obtain focus
This might be something related to the vendor specific styling messing things up with the input box? I can reproduce this on the Facebook login; but I have not seen this an issue anywhere else.

Kats?
I can reproduce on desktop firefox using the UA switcher to simulate fennec. Looking at the firebug styles I'm not sure why this is happening; there is a div which has width 398px and the input element inside it has width:100% but ends up with a computed width of only 157px.

This is either a gecko problem or an evangelism bug; I don't understand why the computed width is 157px so I'm leaning towards gecko problem for now.
This is because they're using display: -moz-box on the parent div which throws us into crazy XUL layout mode. CSS Width doesn't do what you want in that case. If however, they then set -moz-box-flex: 1 on the input element it will flex to 100% width.
I can't reproduce this on desktop Firefox using the UA switcher to simulate Fennec.
Kats, what UAgent string are you using?
I'm using: Mozilla/5.0 (Android; Mobile; rv:17.0) Gecko/17.0 Firefox/17.0
I can reproduce it with that on the Samsung Galaxy Nexus.
(In reply to Wesley Johnston (:wesj) from comment #3)
> CSS Width doesn't do what you want in that case.

Correction after asking dbaron. CSS Width should work, but css width using percent means all bets are off.
(In reply to Wesley Johnston (:wesj) from comment #3)
> If however, they then set -moz-box-flex: 1 on the input element
> it will flex to 100% width.

Sounds like an evangelism issue then?

(In reply to Martijn Wargers [:mw22] (QA - IRC nick: mw22) from comment #4)
> I can't reproduce this on desktop Firefox using the UA switcher to simulate
> Fennec.
> Kats, what UAgent string are you using?

I'm using this UA string:

Mozilla/5.0 (Android; Mobile; rv:17.0) Gecko/17.0 Firefox/17.0a1

I also have the other navigator properties updated to match Fennec. I exported my UASwitcher settings to https://people.mozilla.com/~kgupta/tmp/useragentswitcher.xml if you want to try importing and using it directly.
(In reply to Kartikaya Gupta (:kats) from comment #6)
> (In reply to Wesley Johnston (:wesj) from comment #3)
> > If however, they then set -moz-box-flex: 1 on the input element
> > it will flex to 100% width.
> 
> Sounds like an evangelism issue then?

This issue is not present in the Android stock or Chrome browsers. Unless Facebook has a Gecko specific code path that differs from the Webkit path, I would suggest that there is a limitation in Gecko. Is this issue the result of our following a standard while others don't or is this a case of a difference in implementation?
(In reply to Lawrence Mandel [:lmandel] from comment #7)
> Unless
> Facebook has a Gecko specific code path that differs from the Webkit path

It does, it uses the -moz-box property which is Gecko-only.
(In reply to Kartikaya Gupta (:kats) from comment #8)
> (In reply to Lawrence Mandel [:lmandel] from comment #7)
> > Unless
> > Facebook has a Gecko specific code path that differs from the Webkit path
> 
> It does, it uses the -moz-box property which is Gecko-only.

Sorry. I wasn't clear in comment 7. What I meant was, if a site like Facebook uses the style display: -moz-box for Gecko and display: -webkit-box for Webkit and they get two different results, as appears to be the case here, and the property is non standard, again, as appears to be the case here, we should look at whether we should support the use case in Gecko. This is in contrast to a case where the CSS would be specified using different properties for Webkit and Gecko in order to work around differences in the platforms.
Ah, I see. In that case it should probably be sent over to whoever owns the -moz-box property (I guess core layout?) to see if the use case makes sense.
I think we want to discourage using this non-standard stuff and move sites to flexbox. We haven't shipped flexbox, so its no surprise they aren't using it yet though!

pinging dholbert just to make sure that flexbox can be used to fix this. Their markup is something like:

<div style="display: -moz-box;">
  <input style="width: 100%" type="text"></input>
  <div id="clearButton> × </div>
</div>

So I'm assuming they're just trying to make sure the "x" appears on the right of the textbox, but the textbox fills the rest of the div.
Yup -- when css3-flexbox ships, this will work (tested in my local debug build):
  <div style="display: -moz-flex">
    <input style="min-width: 0; -moz-flex: 1" type="text"></input>
    <div id="clearButton">x</div>
  </div>

(The min-width: 0 part there is optional, but useful to allow the textbox to shrink beyond its auto-width, due to some css3-flexbox's automagical min-width behavior)


In the meantime, this will suffice in existing builds, using old-flexbox:
  <div style="display: -moz-box;">
    <input style="-moz-box-flex: 1" type="text"></input>
    <div id="clearButton">x</div>
  </div>
(and I suspect that should work in webkit with s/moz/webkit/, too)
Comment 11 has test case.  Clearing testcase-wanted.
Keywords: testcase-wanted
tracking-fennec: --- → ?
Daniel - What bug# tracks the css3 flexbox work?
tracking-fennec: ? → +
bug 783409 and dependencies.
Does this still happen? If so, do we need to move this evangelism now? Looks like bug 783409 is closed which I assume means we shipped flexbox.
Keywords: qawanted
This works now on recent builds.
Status: NEW → RESOLVED
Closed: 11 years ago
Keywords: qawanted
Resolution: --- → WORKSFORME
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: