821705 - Banner in desktop view on mobile device is huge

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P3)

Description

[Kadir Topal [:atopal]]

If you are on a smartphone and decide to see the desktop view of a support article, the banner we show you on top to go back to the mobile view is huge, like really huge. On my iPhone it's 1.5 times the size of the whole screen.

Comment 1

[Michael Cooper [:mythmon]]

Kadir: The banner is designed so that when the page is fully zoomed out (which is the default initial view on all phones I tested) the banner fills 100% of the width, and about 20% of the height of the screen. The size of the banner doesn't change as you zoom, so if you zoom in, the banner will get visually larger. Does this intended behavior match what you are seeing? If not, can you please send me a screenshot?

Comment 2

[Kadir Topal [:atopal]]

Attachment: Desktop view with large banner

Mike, that behavior would be great, but it's not what I'm seeing. I'm attaching a screenshot of what is displayed when I choose "desktop view" on an article. This is i0S6 on an iPhone 4s.

There is a similar issue with Firefox on Android, but there it's the opposite, the banner is a super thin, almost invisible line. I'll add a screenshot to visualize the issue.

Comment 3

[Kadir Topal [:atopal]]

Attachment: Desktop view with super thin banner

This is the banner on Firefox on my Nexus S with Android 4.1

Comment 4

[Michael Cooper [:mythmon]]

Attachment: Desktop view with correct banner.

Odd. This is what I see on my Nexus 4 running 4.2.1,

Comment 5

[Michael Cooper [:mythmon]]

Aha, I have figured out at least why your Firefox doesn't display this correctly. It turns out that one of the features of CSS I used isn't supported until Firefox 19. I was testing in Nightly (20), so I didn't see it. Sorry about this! I will work on an alternative way to do this.

Safari 6.0 is supposed to support these features, but apparently not well enough. These features (viewport relative units) aren't an option for quite some time, until at least Firefox supports them.

Comment 6

[Michael Cooper [:mythmon]]

Moving this into the current sprint, because I'm hacking on it and I'm almost done. Estimating as one point, because it has been pretty straight forward.

Comment 7

[Michael Cooper [:mythmon]]

Pull: https://github.com/mozilla/kitsune/pull/1009

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

On master:

https://github.com/mozilla/kitsune/commit/ddd1ccc57340efdf6fc51409faee36b03fa69ff0

Comment 9

[Ricky Rosario [:rrosario, :r1cky]]

Deployed to prod.