Closed Bug 971955 Opened 6 years ago Closed 6 years ago

[B2G][General]Email address overlaps icon when signing into persona

Categories

(Core :: Layout, defect, P2)

defect

Tracking

()

RESOLVED FIXED
mozilla30
blocking-b2g 1.4+
Tracking Status
firefox29 + fixed
firefox30 --- fixed
b2g-v1.3 --- unaffected
b2g-v1.4 --- fixed

People

(Reporter: astole, Assigned: mats)

References

()

Details

(Keywords: regression, testcase)

Attachments

(2 files, 2 obsolete files)

Attached image Screenshot
When the user has a long email address, it overlaps the icon on the 'Sign in' screen when logging into Persona

Repro Steps:
1) Updated Buri to BuildID: 20140212040203
2) Open the marketplace app
3) Select settings (gear icon in top right corner)
4) Select 'Sign In / Sign Up'
5) Enter multiple characters until they overlap icons

Actual:
The characters overlap the icon on the Persona login field.

Expected:
The characters do not overlap the icon.

Environmental Variables:
Device: Buri v1.4 M/C Mozilla RIL
BuildID: 20140212040203
Gaia: 4c6b5142d3b716f1c4ea502eeb92d3119f2b01c6
Gecko: 802d87c77e76
Version: 30.0a1
Firmware Version: V1.2-device.cfg

Notes:

Repro frequency: 100%
See attached: Screenshot
Does this reproduce on 1.3?
Component: General → FxA
Keywords: qawanted
This does not reproduce on the latest 1.3.

Environmental Variables:
Device: Buri v1.3 Mozilla RIL
BuildID: 20140212004003
Gaia: ce17d5eae7b1893ae4397c814b10ae598fcbdb58
Gecko: ab07e61c2eb0
Version: 28.0
Firmware Version: V1.2-device.cfg
blocking-b2g: --- → 1.4?
QA Contact: sarsenyev
A regression window:

The first working build when no overlapping occurs
Device: Buri 1.4 MOZ
BuildID: 20140116040206
Gaia: 82878ba16172213cd00ba3e8b377564b290e59c1
Gecko: 324e2cba1029
Version: 29.0a1
Firmware Version: v1.2-device.cfg

The first broken build when overlapping occurs
Device: Buri 1.4 MOZ
BuildID: 20140117041037
Gaia: ef8bb31b462f364b57432a0724c78034d3f4f303
Gecko: b53589696cf8
Version: 29.0a1
Firmware Version: v1.2-device.cfg
Component: FxA → Layout
Product: Firefox OS → Core
Version: unspecified → Trunk
Blocking for regression
blocking-b2g: 1.4? → 1.4+
Peter, you are looking at this, right?
Assignee: nobody → pchang
(In reply to Milan Sreckovic [:milan] from comment #5)
> Peter, you are looking at this, right?

Yes, I could reproduce this issue on my leo. Checking now...
I could reproduce this issue with firefox night build, but not the firefox release (27.0)build.

Here is the reproduced sample, http://people.mozilla.org/~pchang/input_overlap.html

Inside above sample, it configures "padding-left" attribute. 
But the bound rect[1] of related text display item shifted to left when input text is longer than the input field.

It looks like the "padding-left" doesn't work in latest gecko.
http://dxr.mozilla.org/mozilla-central/source/layout/base/FrameLayerBuilder.cpp#2397
I guess <input type="email"> makes it not match the UA rules for <input type="text">
that has "overflow-clip-box:content-box".  Hmm...  I guess we have to invert that
setup so that we have "input { overflow-clip-box:content-box; }" and then
add "overflow-clip-box:padding-box" to all the non-text/password/number rules.
Assignee: pchang → matspal
OS: Gonk (Firefox OS) → All
Hardware: ARM → All
FTR, the regression was probably caused by bug 157846.  The fixes in bug 965237 / bug 966992
were incomplete in the sense that they didn't fix that regression for unknown 'type' values
like "email".
Blocks: 157846
No longer blocks: 966992
Depends on: 965237
Attached patch fix+tests (obsolete) — Splinter Review
Make overflow-clip-box:content-box the default for all <input> @type values except type=file.

https://tbpl.mozilla.org/?tree=Try&rev=f5470da63712
Attachment #8386004 - Attachment is obsolete: true
Attachment #8386133 - Flags: review?(roc)
Comment on attachment 8386133 [details] [diff] [review]
fix+tests

Actually, we should probably play it safe and make padding-box the default
for button types as well...
Attachment #8386133 - Attachment is obsolete: true
Attachment #8386133 - Flags: review?(roc)
An example:
data:text/html,<input type=button style="width:60px; padding:20px; overflow:hidden" value="1234567890">
Attached patch fix+testsSplinter Review
Make overflow-clip-box:content-box the default for all <input> @type values except type=file/button/reset/submit.

https://tbpl.mozilla.org/?tree=Try&rev=a56bb8c726ed
Attachment #8386320 - Flags: review?(roc)
(In reply to Mats Palmgren (:mats) from comment #8)
> I guess <input type="email"> makes it not match the UA rules for <input
> type="text">
> that has "overflow-clip-box:content-box".  Hmm...  I guess we have to invert
> that
> setup so that we have "input { overflow-clip-box:content-box; }" and then
> add "overflow-clip-box:padding-box" to all the non-text/password/number
> rules.

I had one question. What is the default behavior if we didn't setup overlfow-clip-box properties?
It looks like it goes to padding-box one, just like the behavior of this bug.
okay, I just found the answer from below line. The default behavior is padding-box.
Why we couldn't make content-box as default style?

http://dxr.mozilla.org/mozilla-central/source/layout/style/nsStyleStruct.cpp#2281
(In reply to peter chang[:pchang][:peter] from comment #16)
> Why we couldn't make content-box as default style?

Because CSS2 specifies that clipping occurs at the padding edge:
http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

I intend to propose 'overflow-clip-box' for inclusion in some CSS spec so that it can be used
on arbitrary elements, but the default should be padding-box for web compatibility reasons.
Comment on attachment 8386320 [details] [diff] [review]
fix+tests

[Approval Request Comment]
Bug caused by (feature/regressing bug #): bug 157846
User impact if declined: broken layout for <input> for some values of @type that  results in a single-line text control, e.g. <input type="email">.
Testing completed (on m-c, etc.): green on -inbound
Risk to taking this patch (and alternatives if risky): this patch is low risk, but see also bug 965237 comment 15 for the overall picture.  The alternative is to backout bug 157846, and bug 965237, and bug 966992.
String or IDL/UUID changes made by this patch: none
Attachment #8386320 - Flags: approval-mozilla-aurora?
Blocks: 962714
https://hg.mozilla.org/mozilla-central/rev/6fb8bc793891
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla30
Attachment #8386320 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
You need to log in before you can comment on or make changes to this bug.