845290 - [research] URL bar should fade away on SUMO

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[Kadir Topal [:atopal]]

With the browser on Firefox OS the URL bar fades out once the page is loaded, but on SUMO it's displayed permanently. Since we also have the browser navigation bar at the bottom and the SUMO header on top it takes away precious screen real estate for the content. We should make sure the URL bar fades after a few seconds leaving more room for the content.

Comment 1

[Ricky Rosario [:rrosario, :r1cky]]

If this is possible with js, it should be easy. So 1pt or WONTFIX.

Comment 2

[Rehan Dalal (Inactive)]

Looked into this

Comment 3

[Rehan Dalal (Inactive)]

Oops accidentally hit save...

Looked into this and the way that the items are positioned this is likely going to be very difficult and any solution is likely to cause scrolling issues on iOS/Android.

I'm leaning towards WONTFIX.

Comment 4

[Rehan Dalal (Inactive)]

Spoke to Kadir on IRC about this just now.

I want to break down the problem. The URL bar only fades away when the height of the page is greater than the available viewing area by the height of the browser chrome or more. To accommodate for the design of the SUMO mobile site we have set the height of the containing element of the page to 100%. The browser uses 100% of the available space, not 100% of the device height and therefore it does not trigger the fading away of the browser chrome. Unfortunately until this spec (http://dev.w3.org/csswg/css-device-adapt/) gets implemented, there will not be a good way of doing this in CSS.

But here are the options in order of increasing difficulty:

- WONTFIX this.
- Manually increase the size of the containing element in the CSS by a fixed number of pixels. I don't really recommend this one because the amount that the element is increased by should change based on the browser and the height of the chrome.
- Write a javascript fix to set the height of the containing element to the device height. This would probably be better than the previous solution in that it will work cross device.

My personal suggestion is still to WONTFIX this. I understand that the concern is even less space on an already cramped screen, however the site has been designed to account for this very concern.

The other options will all likely bring up new issues on other devices.

Comment 5

[Kadir Topal [:atopal]]

Rehan, can you outline the non-hacky solution to this issue? The one that might mean a major rewrite. I would like to at least know what we are up against when I explain why we are not going forward with that.

Comment 6

[Rehan Dalal (Inactive)]

:atopal The non-hacky solution to this would be to restructure the way the page is marked up and change a lot of the positioning. 

Right now everything is positioned absolute and it mocks `position: fixed;` by using div scrolling. 

We would need to change this so the body of the page flows normally and the other static elements (header, menus, footer) would need to be position fixed. 

The one deficiency of this method is that position fixed is still not completely cross platform (http://mobilehtml5.org/ --- you can see a list of supported devices/browsers there --- I am not sure how many of those we care about). And on a number of devices that it is supported on, it is still very jittery or does not behave exactly as expected. But support should only improve.

Comment 7

[Ricky Rosario [:rrosario, :r1cky]]

Converting this to a research bug. We'll file a followup based on a final decision.

Comment 8

[Rehan Dalal (Inactive)]

Implementation bug filed here: Bug 852570