1193987 - [Marketplace] Scrollbar is cut off in Categories until scrolling down.

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: General, defect, P4)

Description

[John Thomas [:Johnt]]

Attachment: logcat_20150812_1454.txt

Description: If the user selects the Recommended option from the menu in Marketplace a flashing loading circle / wheel will occur. 

Repro Steps:

Prereq: Already logged into Firefox Account.

1) Update a Aries to 20150812135535
2) Select Marketplace
3) Select drawer option to access additional features.
4) Select Categories.
5) Observe Scrollbar size.
6) Scroll down through the list of Categories to display the scrollbar fully.

Actual:
Scrollbar is cut off at the top until scrolling down the list of categories.

Expected:
It is expected that the scroll bar will display fully and not be cut off into the menu above the Marketplace options.

Environmental Variables:
Device: Aries 2.5 Kk
Build ID: 20150812135535
Gaia: 6fef72357971934c8774578044ea7a442be3a75d
Gecko: b7efed3a2640fba681d48846c3b2ab80474c6f77
Gonk: 2916e2368074b5383c80bf5a0fba3fc83ba310bd
Version: 43.0a1 (2.5)
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0

Repro frequency: 5/5
See attached: Logcat, Screenshot & Video

Video: https://youtu.be/xL3auc_EkJI

Comment 1

[John Thomas [:Johnt]]

This issue DOES occur on the Flame 2.5 and 2.2
Result: Scroll bar is cut off

Environmental Variables:
Device: Flame 2.5 Kk Fullflash (319mb)
Build ID: 20150812073105
Gaia: 6fef72357971934c8774578044ea7a442be3a75d
Gecko: 8584e1ea8f6ac747d828cc2604cfc34a680ff95b
Gonk: c4779d6da0f85894b1f78f0351b43f2949e8decd
Version: 43.0a1 (2.5)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0



Environmental Variables:
Device: Flame 2.2 Kk Fullflash (319mb)
Build ID: 20150811123013
Gaia: 102f1299e9eafe3760e1deb44d556b5c4f36b5af
Gecko: 9295034c0ee3
Gonk: bd9cb3af2a0354577a6903917bc826489050b40d
Version: 37.0 (2.2)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 2

[John Thomas [:Johnt]]

Attachment: IMG_0004.jpg

Comment 3

[Peter Bylenga [:PBylenga]]

No-Jun could this be a graphics issue instead of marketplace?

Comment 4

[No-Jun Park [:njpark]]

This looks to me the search bar is covering up the scrollbar. pinging botond in case he can confirm whether it's the graphics layout issue.

Comment 5

[Botond Ballo [:botond]]

This is not a platform issue - the page is being rendered correctly.

The element that's scrolling starts at the top of the page, so it's scroll port includes the area of the header. The scrollbar correctly spans the entire height of the scrollport. 

The header itself is another element on top of the scrollable element, which obscures part of the scroll bar. The scrolling content itself is positioned with CSS to avoid the header obscuring that.

The solution would be to modify the page structure so that the scrollable element only covers the area where we have scrolling content, and not the header area.

Comment 6

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #5)
> The solution would be to modify the page structure so that the scrollable
> element only covers the area where we have scrolling content, and not the
> header area.

I've made such changes in WebIDE Inspector to verify this

Comment 7

[Botond Ballo [:botond]]

(I'd try to write them up as a proof-of-concept patch, but I can't find the source code of the Marketplace app in the Gaia repo...)

Comment 8

[Botond Ballo [:botond]]

I found the source code of the Marketplace app (https://github.com/mozilla/fireplace/) and tried to install a local copy of it, but it's turning out to be way too complicated (the packaged build seems to be broken, so I need to install and run a local development server to serve the app, and get that running on a computer that's on the same network as my device...).

Instead, I'm just going to *describe* the changes I made in WebIDE.

I selected the following element:

  <mkt-nav-child id="categories" class="mkt-nav--visible">

(this is the scrollable element whose scrollbar is in question)

and made the following changes to its Rules:

  - changed 'top' from '0px' to '60px'
  - changed 'height' from '100%' to 'calc(100% - 60px)'
  - changed 'padding' from '60px 10px' to '0px 10px'

I believe these changes would be effected by the following change to the source code:


diff --git a/src/media/css/elements--nav.styl b/src/media/css/elements--nav.styl
index baf3bee..9fbc480 100644
--- a/src/media/css/elements--nav.styl
+++ b/src/media/css/elements--nav.styl
@@ -126,13 +126,13 @@ mkt-nav {
 mkt-nav-root,
 mkt-nav-child {
     display: block;
-    height: 100%;
+    height: calc(100% - $nav--header-height);
     left: -1 * $nav--width;
     list-style: none inside;
     overflow-x: hidden;
     overflow-y: auto;
     position: absolute;
-    top: 0;
+    top: $nav--header-height;
     transition: unquote($nav--transition);
     width: $nav--width;
 }
@@ -169,7 +169,7 @@ mkt-nav-root {
 mkt-nav-child {
     background: $color--nav--child-bg;
     border-right: 2px solid $color--nav--child-border;
-    padding: $nav--header-height 10px;
+    padding: 0px 10px;
     z-index: $zindex--nav-hamburger-child;
 
     +nav--subnav-visible() {


but, as described above, I wasn't able to test this. Please treat this as a proof-of-concept patch, and an untested one at that.