935615 - Apple.com homepage is super zoomed in

Status: RESOLVED WORKSFORME

(Firefox for Android Graveyard :: Toolbar, defect)

Description

[Tony Chung [:tchung]]

Attachment: view source of apple site

The apple home page is showing up mega zoomed in on Firefox ANdroid.   this seems to scale correctly when launching Chrome.

Affects Fx25 and Fx26.

Html source and screenshot attached.

Repro:
1) launch Fx26 or fx25 on Nexus 5, Android 4.4  (affects older devices also)
2) goto www.apple.com
3) Verify page is mega zoomed in

Expected:
- scale page correctly to firefox android

Actual:
- site loads way zoomed in.

Comment 1

[Tony Chung [:tchung]]

Attachment: screenshot

Comment 2

[Tony Chung [:tchung]]

Possibly this snippet.

	<title>Apple</title>
	<meta name="viewport" content="width=1024, user-scalable=no" />
	<meta name="omni_page" content="Apple - Index/Tab" />
	<meta name="Description" content="Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad." />
	<link rel="home" href="http://www.apple.com/" />
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://images.apple.com/main/rss/hotnews/hotnews.rss" />
	<link rel="index" href="http://www.apple.com/sitemap/" />
	<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/v/home/ae/styles/home.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/v/home/ae/styles/billboard.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/home/styles/billboard.css" type="text/css" />

Comment 3

[Mike Taylor [:miketaylr]]

I'm not entirely sure this is a TE bug, based on what other browsers do. I've tested Chrome, Blink-Opera, Presto-Opera, iOS6 Safari, Firefox, Android native browser.

If "width=1024, user-scalable=no" is set in meta@viewport, the viewport is super zoomed in in Firefox for Android and the Android native browser. All other browsers behave as I would expect.

Here's three testcases:

https://miketaylr.com/bzla/935615-1.html, <meta name="viewport" content="width=1024">
https://miketaylr.com/bzla/935615-2.html, <meta name="viewport" content="width=1024, user-scalable=no">
https://miketaylr.com/bzla/935615-3.html, <meta name="viewport" content="width=1024, user-scalable=yes">

Unfortunately there's no real spec to read, but I would guess that iOS Safari is the reference blackbox^H^H^H^Himplementation. And iOS 6 on my old iPhone shows all 3 testcases with the viewport scaled to 1024 virtual pixels.

Comment 4

[Mike Taylor [:miketaylr]]

Attachment: chrome.png

Comment 5

[Mike Taylor [:miketaylr]]

Attachment: ff.png

Comment 6

[Mike Taylor [:miketaylr]]

Attachment: ios.png

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: native.png

Comment 8

[Mike Taylor [:miketaylr]]

Attachment: opera.png

Comment 9

[Mike Taylor [:miketaylr]]

Attachment: presto.png

Comment 10

[Mike Taylor [:miketaylr]]

The order of the screenshots is 1) width=1024 2) width1024, user-scalable=yes width=1024 3)user-scalable=no.

Also to clarify, the Firefox for Android and Android Native browser aren't quite the same. Fennec is zoomed in somewhere in the middle while the Native browser is zoomed in at the top of the page.

Comment 11

[Kartikaya Gupta (email:[e-mail])]

That does sound like a FF bug.

Comment 12

[Kartikaya Gupta (email:[e-mail])]

A quick investigation shows that since there is no initial-scale set, we default to window.devicePixelRatio as the zoom (2.0 on my Nexus 4), and then while doing the zoom in to that level we use the center of the viewport as the focus so you end up in with a nonzero scroll offset.

If we modify the code at [1] to set the "scale" variable be something more reasonable under these conditions then that should fix this.

[1] http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js?rev=26df3bab1ab9#5831

Comment 13

[Mike Taylor [:miketaylr]]

I emailed my former colleague Rune (who authored the CSS Device Adaptation spec) asking about sane defaults for zoom and he replied:

On 20/11/2013 14:23, Rune Lillesveen wrote:> There is a non-normative section in the spec suggesting how to pick an
> initial zoom factor when it's auto:
> 
> http://dev.w3.org/csswg/css-device-adapt/#handling-auto-zoom
> 
> That description did match the Safari/iOS behavior at the time of
> writing. Perhaps a bit technically written, but in short it means:
> 
> "If the zoom (initial-scale for meta viewport) is 'auto', zoom out as
> far as you can constrained by the min-zoom and not revealing a
> non-rendered area."
> 
> The rendered area is at least as big as the the viewport, but can be
> extended by overflowing content.
> 
> I think Opera/Presto for Android only looked at the width, probably
> Blink/WebKit too. As an example, take a device of 320x480 where you
> set width=device-width. If you add a 400px wide div to the document,
> but the document would not have content to make it taller than 480px,
> Opera/Presto would zoom out to make the whole 400px div visible while
> Safari/iOS would stay at zoom=1 because otherwise an area below the
> 480px height would be become visible. Safari/iOS would zoom to show
> the 400px div if content was added to the document to make the
> vertical overflow tall enough.

Comment 14

[Lukas Blakk [:lsblakk] use ?needinfo]

Not tracking this since it's visual glitch but has workaround and website functions - also it shipped in FF25 without major user feedback about seeing this on a lot of sites that we know of.  So a low risk uplift would be considered but we're very late in the Beta cycle for speculative fixes and this might have to wait until FF27 unless it's extremely low risk and testable OR if we can find the regression and try a backout to a known-good state.

Comment 15

[Kevin Brosnan [Ex-Mozilla]]

We don't know that this is a regression. The website could have changed.

Comment 16

[Kevin Brosnan [Ex-Mozilla]]

Narrowed this to a release using comment 3 testcase 2. I have not been able to reproduce via apple.com

Firefox 20 good 
Firefox 21 broken

Firefox 21 development started on 2013-01-07 and ended on 2013-02-19.

Comment 17

[Ioana Chiorean]

I tried to find a regression between the interval Kevin mentioned. I was not able to reproduce it. 
I did try with the Fx 26 Release build from Play (26.0.1) and I am not seeing the page zoomed (bug was reported on 25 and 26)

Comment 18

[Mike Taylor [:miketaylr]]

The actual site has changed, it's now just <meta name="viewport" content="width=1024" /> (without user-scalable=no). So I think we still have the bug, just not on the current incarnation of apple.com.