946406 - [B2G][Browser][Quora]Quora displays overlapping/cluttered formatting.

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Ross Kuhlman ([e-mail])]

Attachment: SearchBarOverlapsProfileIcon.png

Quora.com does not display appropriately for users. The search bar at the top of the page overlaps the user's profile icon, preventing the user from accessing any profile specific features. Also, when creating a new profile, Quora displays cluttered text while selecting interests.

Default Repro Steps:
1) Updated Buri to Build ID: 20131126004001
2) Launch Browser app and navigate to www.quora.com.
3) Sign into a profile.
4) Observe Search bar at top of screen.

Profile Creation Repro Steps:
1) Updated Buri to Build ID: 20131126004001
2) Launch Browser and navigate to www.quora.com.
3) Begin creating a new profile.
4) Choose 5 interests when prompted.
5) Observe next page, where user is prompted to choose 5 more interests.

Actual:
Page displays cluttered and overlapping assets.

Expected:
Page displays with proper formatting.

Environmental Variables
Device: Buri v 1.2 COM RIL
Build ID: 20131126004001
Gecko: http://hg.mozilla.org/releases/mozilla-b2g26_v1_2/rev/21e2ad082d85
Gaia: 264c6044b941437ac3c4b28fe4ca392d2bc78445
Platform Version: 26.0
RIL Version: 01.02.00.019.102 
Firmware Version: V1.2_20131115

Notes:
Repro frequency: 100%
See attached screenshots.
Optional extra notes:
There is no Quora app or mobile site. At the time of this writing, www.quora.com is the only way for FxOS users to access quora. The Quora page displays appropriately on android.

Comment 1

[Ross Kuhlman ([e-mail])]

Attachment: ClutteredTextWhenCreatingProfile.png

Issue also occurs in 1.1
Device: Leo v 1.1 COM RIL
Build ID: 20131122041201
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/c699a8e7bde9
Gaia: b7610870ec71495685557744bfbcbce357032251
Platform Version: 18.1
RIL Version: 01.01.00.019.281 
Firmware Version: lge_default

Comment 2

[Mike Taylor [:miketaylr]]

I don't see any problems with the search bar, so that issue may have been resolved.

As for the overlapping text, the div.section that contains the overlapping h1s is constrained to a height of 80px so it has no choice but to overflow, but only around 455px wide or so.

Removing the height props from the following selectors in their CSS fixes the problem:
.welcome_main .section {height: 80px;}
.nux-flow .section {height: 80px;}

(then they'll probably want to tweak the padding-bottom, etc.)

Comment 3

[Mike Taylor [:miketaylr]]

Attachment: fxos.png

Comment 4

[Mike Taylor [:miketaylr]]

Attachment: chrommobile.png

Adding a screenshot of Chrome Mobile for comparison.

Comment 5

[Karl Dubost💡 :karlcow]

First attempt through twitter http://twitter.com/MozWebCompat/status/411179322251431936
I didn't find any obvious reporting system on their web site.

Comment 6

[Hallvord R. M. Steen [:hallvors]]

Is this still a problem? Don't see anything like the screenshots on the quora.com landing page now.

Comment 7

[Hallvord R. M. Steen [:hallvors]]

I still see the somewhat misplaced arrow issue after logging in. Perhaps somebody in the Moz Mountain View office should walk downstairs and knock on doors? ;-)

Comment 8

[Hallvord R. M. Steen [:hallvors]]

The "create account" overlapping is not fixed yet, just re-tested. I suppose it fails on all screens that are narrow enough.

Comment 9

[Hallvord R. M. Steen [:hallvors]]

I pinged them on Twitter: https://twitter.com/MozWebCompat/status/459258452599394304 (since the Mountain view office moved it's less convenient to get somebody to knock on a door downstairs to deliver a bug report ;-))

Comment 10

[Karl Dubost💡 :karlcow]

So I don't have any issues with overlapping screens but with not getting to the next steps once logged.
It's like it was not recording my choices.
After logging it is proposing you to pickup 5 items. But then nothing else is possible after these choices. You can still select or deselect but not other steps. If you reload you are back to select from a blank list.

Comment 11

[Ioana Chiorean]

(In reply to Karl Dubost :karlcow from comment #10)
> So I don't have any issues with overlapping screens but with not getting to
> the next steps once logged.
> It's like it was not recording my choices.
> After logging it is proposing you to pickup 5 items. But then nothing else
> is possible after these choices. You can still select or deselect but not
> other steps. If you reload you are back to select from a blank list.

that is because the done button is not displayed - tapping the upper right corner ( where the "Done" button should be ) will take you to next screen.

Comment 12

[Ioana Chiorean]

Attachment: Missing Done button - comparison Firefox with Chrome

Tapping the upper right corner will take you to next steps so the button is constructed but not displayed visible.

Comment 13

[Karl Dubost💡 :karlcow]

Attachment: quora-04-topics-fxos.png

Comment 14

[Karl Dubost💡 :karlcow]

Attachment: quora-05-selected-fxos.png

One of the issues with this bug is to be able to reproduce it. ^_^
Given that it is happening only at the registering phase. 

OK but it accepts fake email addresses, so let's see.

The button Done is visible.
After selecting the 10 topics it is active. \o/