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)
Tracking
(fennec+)
RESOLVED
WORKSFORME
Tracking | Status | |
---|---|---|
fennec | + | --- |
People
(Reporter: ioana.chiorean, Unassigned)
References
()
Details
(Whiteboard: [fennec 15.0])
Attachments
(1 file)
218.83 KB,
image/png
|
Details |
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.
Updated•12 years ago
|
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
Comment 1•12 years ago
|
||
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?
Comment 2•12 years ago
|
||
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.
Updated•12 years ago
|
Comment 3•12 years ago
|
||
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.
Comment 4•12 years ago
|
||
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.
Comment 5•12 years ago
|
||
(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.
Comment 6•12 years ago
|
||
(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.
Comment 7•12 years ago
|
||
(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?
Comment 8•12 years ago
|
||
(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.
Comment 9•12 years ago
|
||
(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.
Comment 10•12 years ago
|
||
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.
Comment 11•12 years ago
|
||
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.
Comment 12•12 years ago
|
||
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
Updated•12 years ago
|
tracking-fennec: --- → ?
Comment 15•12 years ago
|
||
bug 783409 and dependencies.
Comment 17•11 years ago
|
||
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
Comment 18•11 years ago
|
||
This works now on recent builds.
Assignee | ||
Updated•3 years ago
|
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•