627754 - ajax.org uses an iPhone specific stylesheet for its mobile page, but should use the android stock browser stylesheet

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Kevin Brosnan]

Attachment: Screenshot

Visit http://ace.ajax.org page is not zoomed to fit the screen and you cannot pan to the right to view the rest of the content.

Comment 1

[Kevin Brosnan]

HTC G2
Build ID: http://hg.mozilla.org/mozilla-central/rev/e0ea4e4d401f
build date: 2011-01-21

Comment 2

[Matt Brubeck (:mbrubeck)]

It looks like this page is actually cut off; you can't scroll any farther right than what's shown in the screenshot.

This page has an "iphone.css" stylesheet that is used on small-screens devices:

> <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="iphone.css">

This stylesheet sets "overflow: hidden" on the element that contains the main body content:

> #wrapper {
>     position:relative;
>     overflow:hidden;
> }

So it looks like this is a bug in the page, and not in Fennec.  We render the page at our default viewport width of 800px, which is not large enough to contain the page, and the page explicitly hides any content outside the viewport.

Comment 3

[Kevin Brosnan]

Any way to check if the stock browser is getting this same css? It seems to handle this.

Comment 4

[Matt Brubeck (:mbrubeck)]

I don't know an easy way to view source in the stock browser.  I suspect their default viewport is simply larger than ours.

Fennec starts with a default viewport of 800px, and then enlarges it to 980px (same as the iPhone) if the content extends beyond 800px (bug 604765).  But the "overflow: hidden" in iphone.css ensures that the content will never extend past the viewport.

The page could fix this by adding something like "min-width: 980px;" to the #wrapper rule set, or by adding <meta name="viewport" content="width=980"> to the HTML.  Or by removing the "overflow: hidden" if it's not necessary.

Comment 5

[Aakash Desai [:aakashd]]

This should be moved to

Comment 6

[Karl Dubost💡 :karlcow]

On both ipod ios Safari and Firefox Android, I receive a kind of fluid desktop semi-responsive site.
The display is even better on Firefox Android than iOS.
The initial domain name doesn't exist anymore. Now the domain is http://ace.c9.io/

Resolved as Invalid