In story viewer, title bar at top is persistent, obscures story content

[jwirfs-brock]

Right now, the bar at the top of the viewer (which has the title) is persistent when you scroll. It makes sense for the bottom bar to be persistent, because it has the navigation, but I think that you should be able to scroll past the top bar. If it's always visible, the area for content is super tiny.

Here's an example of a YouTube video embed which is cut off, thus impossible to view, with the persistent title bar (this was tested in the iPhone emulator in Chrome):

This problem is especially noticeable for stories with long titles, but it still annoying even with a short, one-line title:

[jwirfs-brock]

When testing on my phone (Android 4.2.2, Samsung Galaxy Nexus), I'm also seeing the title bar float down to the middle of the story viewer. It keeps "jumping" around when I scroll. Very odd.

@ghing I'm having trouble testing this with the emulator in Chrome (for some reason, it just shrinks everything to fit, and looks very different than what I'm seeing on my phone). Do you have a phone you could also test on so we could get a second data point?

[ghing]

I updated the viewer code so it only makes the header sticky on wider displays. I think that's the best behavior given the variable nature of header lengths.

@jwirfs-brock, does this workaround make sense for you? This should also address the weirdness you're seeing on your phone since it no longer adjusts the header automatically. I'm guessing maybe the JavaScript calculations used to dynamically set the body padding (because titles are variable length) is just slower on the phone, so you see the jumping around.

[ghing]

Oh yeah, you'll have to do a hard refresh or empty your cache to see this change.

[jwirfs-brock]

Weird -- I thought I commented on this on Friday but some reason my comment didn't show up (slow internet connection thing probably).

I'm still seeing the top bar persist/float down, even after emptying my cache, both on my phone and tablet.

[jwirfs-brock]

Oh, and I'm seeing it in the emulator as well (for Android devices).

[jwirfs-brock]

@ghing An additional detail I noticed: On my phone and in the emulator, I'm only seeing the title persist when the screen is in the horizontal orientation. In the vertical orientation, it behaves the way we want it to.

Additionally, if you have it in the vertical orientation, then flip it horizontal and scroll, then flip it back to vertical, then the title persists when you scroll.

[ghing]

That's a good clue. I was triggering on browser width (because that's how media queries work), rather than height, which is more appropriate in this case. I'll fix this later today.

[ghing]

I updated the viewer code so it sets the stickiness of the header based on window height rather than width. Is this working better for you now @jwirfs-brock. Again you'll have to do a hard refresh/clear cache to see the changes.

[jwirfs-brock]

@ghing I'm still seeing the title/header float down in the viewer on my phone (in both horizontal and vertical orientations). I cleared my browser cache.

At what window height is the behavior supposed to switch?

[ghing]

The header should not be sticky if the header is taller than 30% of the window height. I'll see if I can emulate your phone to get a better sense of what's going on.

[jwirfs-brock]

@ghing Ok. I asked because I wanted to check and make sure it wasn't just that my phone was the wrong dimensions.

I took at look in Chrome's emulator as well, and am still seeing a sticky header for most of the Android devices. Do you have a recommended device to emulate for testing? They all have slightly different screen sizes and resolutions, which I'm sure makes it really fun as a developer!

[ghing]

@jwirfs-brock. I tested it using a Galaxy Nexus profile in the android emulator (the actual device emulator, not Chrome) and the default android browser, and the header wasn't sticky. I'll try to look at the analytics to see if there's a most common android device.

[ghing]

@jwirfs-brock, here's this month's top 10 mobile devices from Google Analytics:

1. Apple iPad
2. Apple iPhone
3. (not set)
4. Toshiba AT300 Regza AT300
5. Apple iPod
6. Samsung GT-I9300 Galaxy S III
7. LG Nexus 5
8. Samsung GT-I9500 Galaxy S IV
9. Amazon KFTHWI Kindle Fire HDX 7 3rd Gen
10. Google Nexus 7

I was also looking for data about the most popular devices worldwide or in the U.S. and a quick Google search didn't find anything definitive. I did find this article that mentions a lot of the Android devices we're seeing. According to the article, the Galaxy S III is the most popular device, which I've heard from other places as well. Seems like, barring the resources to test every possible device, making sure we at least test on the iPhone and an S III seems like a good idea.

[ghing]

@jwirfs-brock, I took a look at this in the Chrome emulator set to emulate Galaxy SIII/Galaxy Nexus and the header wasn't sticky in either portrait or landscape mode.

[jwirfs-brock]

@ghing Ok, that's really weird. I have it on the same settings and the title is sticky. And I just cleared the browser cache and then cleared a refresh. Here are the screenshots, including the emulator settings (so maybe you can find what I'm missing):

Summary section scrolled down, title still persists at the top:

Middle section of the story, here's what it looks like before scrolling (title should be at the top, and is):

And after I've scrolled down, title is still at the top:

I observed the same thing when I switched the orientation, so didn't include those screen shots.

[ghing]

@jwirfs-brock. Ok. We were looking at different stories. I was looking at the "Boy Meets World" story (/stories/boy-meets-world-how-college-view-elementary-prepar/) which is the one in the original screenshot for this issue. The "Why Libraries are Relevant" story has a shorter title bar, so the sticky behavior stays.

Do you find the sticky header behavior problematic for the "Why Libraries are Relevant" story?

[jwirfs-brock]

@ghing Hmmm, I didn't actually consider whether we should let the length of the title influence the behavior? I think that, regardless of whether the title fits onto one line or takes up more, it's hard to read content in the horizontal configuration when the title is sticky. Even with a one-line title, there's not much space for content. So, to me it makes sense to not have it be sticky, even if it's short. What do you think?

[ghing]

I think it makes sense to not be sticky for short displays. I'll update the code to do this tomorrow. It might just be a matter of making the header height/screen height ratio threshold smaller.

[ghing]

Ok. I updated the code and deployed to dev. It doesn't scroll when the device is in landscape mode either in the ADT emulator (emulating Galaxy Nexus) or on my real phone (HTC One V).

As always, be sure to clear your cache to get the latest code.

[ghing]

Both @jwirfs-brock and I think this is fixed now.

[jwirfs-brock]

@ghing On production, I'm observing this on my Galaxy Nexus, screen resolution 1280 x 720, running Android 4.2.2, in the vertical (portrait) orientation.

I was looking at the story, "HVAC Visualization." On the summary section, the title ended up in the middle of the screen after scrolling. On the next section, the title ended up at the bottom of the screen after scrolling.

[ghing]

I opened the "hopping" header as a new issue, #942, to avoid confusion as this issue originally had to do with the height of the sticky header on small screens rather than the header being incorrectly positioned during scrolling.