Closed Bug 1469747 Opened 6 years ago Closed 6 years ago

[viewport] 1.0001 is a magical value for meta name viewport (in WebKit world)

Categories

(Core :: Layout, defect, P3)

62 Branch
Unspecified
Android
defect

Tracking

()

RESOLVED DUPLICATE of bug 1494422
Tracking Status
firefox60 --- affected
firefox61 --- affected
firefox62 --- affected

People

(Reporter: karlcow, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [webcompat:p2])

User Story

Would be good for GeckoView.
Some websites are using the following values in the meta viewport

<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no">

It has unintended consequences in Firefox Android.

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


The value 1.0001 was used by Web developers to fix an issue with iOS devices when  iOS 9 was released. It happened in 2015. Basically, this was a hack to fix a change when rotating the device (in between portrait mode and landscape mode.)

WebKit is zooming out the content to fit the full content of the page. But developers needed a "shrint-to-fit=no" (which was added)
https://forums.developer.apple.com/thread/13510#60444

Unfortunately many developers have been using the 1.0001 magical values.

My hunch is that the magical value comes from 
https://github.com/WebKit/webkit/blob/04c2bea6721a142bb73f9626e646c5aa5251c2d8/Source/WebKit2/Shared/CoordinatedGraphics/SimpleViewportController.cpp#L118

which computes a boolean for enabling the "scale to fit" with a clamping set at 0.0001 
 bool currentlyScaledToFit = fuzzyCompare(m_pageScaleFactor, m_minimumScaleToFit, 0.0001);
Flags: webcompat?
Whiteboard: [webcompat] → [webcompat:p3]
User Story: (updated)
Whiteboard: [webcompat:p3] → [webcompat:p2]
Blocks: 1323062
Note that the site for https://webcompat.com/issues/15180 has dropped the 1.0001 values in some circumstances:

They now use including viewport-fit=cover
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
https://webkit.org/blog/7929/designing-websites-for-iphone-x/


Circumstances are determined by the screen size.

if (screen.width < 768) {

  var meta = document.createElement('meta');
  meta.name = "viewport";
  meta.content = "user-scalable=no, initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001";
  document.getElementsByTagName('head')[0].appendChild(meta);

  var element1 = document.createElement("link");
  element1.setAttribute("rel", "stylesheet");
  element1.setAttribute("type", "text/css");
  element1.setAttribute("href", "/css/desktop-responsive.min.css");
  document.getElementsByTagName("head")[0].appendChild(element1);

  var element = document.createElement("link");
  element.setAttribute("rel", "stylesheet");
  element.setAttribute("type", "text/css");
  element.setAttribute("href", "/css/mobile-responsive.min.css");
  document.getElementsByTagName("head")[0].appendChild(element);
}

On Chrome the initial size will be 360px
and in Firefox it will be 980px. 

So this will kick back again when we fix Bug 1423709
(In reply to Karl Dubost :karlcow from comment #0)
> The value 1.0001 was used by Web developers to fix an issue with iOS devices
> when  iOS 9 was released. It happened in 2015. Basically, this was a hack to
> fix a change when rotating the device (in between portrait mode and
> landscape mode.)

As per a comment [1] in Apple Developer Forum, the hack was also indented to avoid shrinking wider contents to device screen width even if initial-scale=1 is specified.

[1] https://forums.developer.apple.com/thread/13510
No longer blocks: 1323062
It's not yet clear to me why the site in https://webcompat.com/issues/8023 is correctly viewed on normal nightly, but I think we can make this a dup of bug 1494422.

Karl?
Flags: needinfo?(kdubost)
Hiroyuki,

Yes that's interesting it seems it was not working and it's now working.
It is currently.

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0001, minimum-scale=1.0001">
```

The maximum-scale value has been dropped and they probably added `width=device-width`
Let's make it a dupe indeed. 


In this one, we get:
https://webcompat.com/issues/17551

```html
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no">
```

I wonder if `width=device-width` is making a difference.
Flags: needinfo?(kdubost)
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.