1001264 - (Glow:FFAndroid) FF Android Stats Page - Jumps Down The Page, Does Not Display Graphs

Status: VERIFIED FIXED

(Websites :: glow.mozilla.org, defect)

Description

[Ben (:bensternthal)]

Attachment: Screenshot_2014-04-24-20-52-34.png

On FF Android Only (chrome works great) I noticed 2 issues.

1. After you click a button the stats page can sometimes load with the dropdown at the top of the screen. So the user never sees the number. This does not happen consistently

2. The data graphs do not load. However if I rotate the screen they appear. See screenshot of unloaded state.

Comment 2

[Ben (:bensternthal)]

Adding additional info from bug 1001185

The graphs also do not load on iPhone. Same behavior, rotate the screen to landscape and they appear.

Comment 3

[Steven Garrity [:sgarrity]]

Assigning to Ali - looks like the width on the SVG is getting set to 0 in the mobile layout.

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mrburns

https://github.com/mozilla/mrburns/commit/11e3c552913949a89da332d92c044de72f6f8005
Fix bug #1001264 - stats charts on mobile

Stats charts not appearing on mobile

https://github.com/mozilla/mrburns/commit/824bb41402ebd4594a1c92fc802fc424784005ed
Merge pull request #131 from almossawi/master

Fix bug #1001264 - stats charts not appearing on mobile

Comment 5

[Ali Almossawi]

Changes made in PR 131.

Could you kindly confirm that the charts now appear on mobile. I was only able to test on an iPhone and by loading the page in mobile view on desktop.

Comment 6

[Ben (:bensternthal)]

Verified on FF Android. Working now.

Comment 7

[Ben (:bensternthal)]

Note the scrolling issue.. it occurs if you scroll down on the list of buttons on the first page.

Comment 8

[Ali Almossawi]

I'm unable to reproduce it. Could you attach a screenshot, please.

Comment 9

[Ben (:bensternthal)]

Hard to send screenshot of this one.

If i scroll down on the top page and select say the last button.. the stats page loads with the numbers off screen.

Attached is a screenshot of where the second page loads.

Comment 10

[Ben (:bensternthal)]

Attachment: Screenshot_2014-04-25-12-39-33.png

Comment 11

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mrburns

https://github.com/mozilla/mrburns/commit/30de3f4c14761910b4da7790088f6a195620fa13
Fix point 2 in bug #1001264

Testing in dev

https://github.com/mozilla/mrburns/commit/cafea1617a2cbcb8ba8c3dccfc845035b3f6d1ca
Merge pull request #137 from almossawi/master

Fix point 2 in bug #1001264

Comment 12

[Ali Almossawi]

Could you please verify.

Comment 13

[Ben (:bensternthal)]

OK testing on FF android.

1. Page still jumps down.

2. Graphs are not scaled down and are busting out

Note I can replicate both of these in firefox desktop by shrinking my window down. See attachment.

Comment 14

[Ben (:bensternthal)]

Attachment: Screen Shot 2014-04-25 at 2.54.37 PM.png

If you shrink the window down to this size and scroll down you should be able to replicate the behavior.

Comment 15

[Steven Garrity [:sgarrity]]

(In reply to Ben (:bensternthal) from comment #14)
> If you shrink the window down to this size and scroll down you should be
> able to replicate the behavior.

I'm seeing this too. It "fixes" as soon as the browser is resized at all, so some even is triggered on resize that isn't triggered on load.

Comment 16

[Ali Almossawi]

It sets the svg's width to its parent's width on page load and resize, but for some reason, the latter is 0 on page load when in mobile view.

What I currently do in local is set its width to the window width when the page is loaded in mobile view, which fixes the issue, but leaves me with a feeling of disappointment and shame...

Planning to look at it tomorrow at around noon.

Comment 17

[Steven Garrity [:sgarrity]]

Ali, I wondered if the issue is that, in the mobile layout, the stats panel is set to display:none; until the .stats-panel-open class is added to the body after the topic is picked.

When the display is set to none, the parent of the SVG element doesn't have a width yet (hence, zero).

Comment 18

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mrburns

https://github.com/mozilla/mrburns/commit/198d7643f4de2adc3f2cb3be63cb80e399acc0dd
Fix bug 1001264

Testing in dev

https://github.com/mozilla/mrburns/commit/c3d584b9f9d93afed7cd3153cc336f657c3b4ecb
Merge pull request #145 from almossawi/master

Fix bug 1001264

Comment 19

[Ali Almossawi]

Aah, that was it. Thanks.

Ben, could you please verify both reported issues.

Comment 20

[Ben (:bensternthal)]

tested dev.. verfified fixed