984933 - Google Play - Navigation overlay obstructing most of the app-pages

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Elbart]

When browsing on any app-page on Google Play, the navigation-field is always floating in the top left corner.
The more zoomed in the page is, which is necessary to read anything, the bigger the navigation-field becomes to the point it's covering the text completely.

Screenshot: http://i.imgur.com/ICztEre.jpg
Fx for Android 28 left, Chrome Mobile 33 right
Page is scrolled a bit to the right and down.

I know that this is the normal behavior of Google Play in desktop browsers, so I don't know if Firefox is just getting the desktop-version of the site instead of the mobile version like Chrome Mobile.

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

Mike can someone on the WebCompat team check to see if this is a website issue or a Firefox issue?

Comment 2

[Mike Taylor [:miketaylr]]

Looking now.

Comment 3

[Mike Taylor [:miketaylr]]

So I've got this reduced down to https://miketaylr.com/bzla/store.htm.

It seems like the main problem here is the div.nav-container gets a .sticky class applied when you're scrolled down. That class looks like:

.nav-container.sticky {
  position: fixed;
  top: 0
}

So I'd say we're doing exactly what the CSS is asking for, for better or worse.

What I don't understand right now is why Chrome Mobile and Opera Mobile don't seem to get the sticky class applied to their nav-container (but they are served that same CSS). If you manually add the sticky class, you get the same behavior as we do.

The answer to that probably lies in https://www.gstatic.com/play/store/web/js/911379924-initial_page_js_compiled_initial_page_js.js somewhere--I need to hop into other projects today but will poke at it again in the morning.

Comment 4

[Mike Taylor [:miketaylr]]

Eh, I lied. The script was much smaller than I was expecting. ^_^

They've got a scroll event handler that depends on this.u:

b.scroll(r(function() {
  this.u && this.b.toggleClass("sticky", b.scrollTop() > this.n);
}, a));

this.us is defined here:

function $() {
  this.a = null;
  ...[snip]....
  this.u = !(Ga && jQuery("body").hasClass("exp-nonsticky-nav"));
}

And "Ga" is set here:

var Fa = C("Opera") || C("OPR"), D = C("Trident") || C("MSIE"), E = C("Gecko") && !C("WebKit") && !(C("Trident") || C("MSIE")), F = C("WebKit"), Ga = F && C("Mobile");

So, if your useragent string has both "WebKit" and "Mobile", "Ga" will be true, which means this.u will be false and you'll never get the "sticky" (position:fixed) class added to the nav-container.

So yeah, turns out to be UA sniffing. The recommended fix would be to tweak Ga to be something like "Ga = C("Mobile")" (losing the WebKit string sniff).

Comment 5

[Karl Dubost💡 :karlcow]

Hmm I can't reproduce, is it still an issue?

Comment 6

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

Seems to work fine here too