Closed Bug 1544649 Opened 5 years ago Closed 9 days ago

Site with a fixed width is not zoomed in Firefox, zoomed in Chrome by CSS zoom property

Categories

(Core :: Layout, defect, P3)

Product:
Core
Component:
Layout
Version:
68 Branch
Platform:
Unspecified
Android
Type:
defect

Tracking

()

Status:
RESOLVED WORKSFORME
Project Flags:
Webcompat Priority P3
Tracking Flags:
Tracking Status
firefox66 --- affected
firefox67 --- affected
firefox68 --- affected
firefox90 --- affected
firefox91 --- affected
firefox92 --- affected

People

(Reporter: karlcow, Unassigned)

References

(Blocks 1 open bug,
URL
)

Details

(Whiteboard: [webcompat])

Attachments

(1 file)

test.html
1.19 KB, text/html
Details

Steps to reproduce

  1. Go to http://game.granbluefantasy.jp/#top
  2. See the black bar on the right side.

The site is 320px wide.

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
The body is the width of the screen on Firefox Android, which on a Pixel 2 will be 411px, with these relevant values.

body {
	margin: 0;
}

body:not(.jssdk) {
	position: relative;
}

but on chrome, it adjusts the body width to what is set for the wrapper.
The main wrapper for the page is setting a fixed width of 320px.

.wrapper {
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #88aeb7), color-stop(5%, #b8d0d3), color-stop(20%, #cfe8eb), color-stop(80%, #d2d4cf), color-stop(95%, #c7cebd), color-stop(100%, #afc1c5));
	background-image: -webkit-linear-gradient(left, #88aeb7 0%,#b8d0d3 5%,#cfe8eb 20%,#d2d4cf 80%,#c7cebd 95%,#afc1c5 100%);
	background-image: linear-gradient(left, #88aeb7 0%,#b8d0d3 5%,#cfe8eb 20%,#d2d4cf 80%,#c7cebd 95%,#afc1c5 100%);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 320px;
	min-height: 450px;
	padding-bottom: 104px;
	position: relative;
	margin: 0 0 50px;
	line-height: 1;
}
Flags: webcompat?

Perhaps Chrome computes the "content size" for this page differently from us, and sometimes it can be smaller than the ICB size?

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Attached file test.html —

Perhaps Chrome is just initially zooming to fit all of the content? For instance, citilink.ru does not specify any meta viewport; it just sets the width of its header, footer and such to 1450px. Upon loading the page, Firefox ends up zooming in so some content is off-screen (with window.innerWidth < 1450px), while Chrome shows the full page zoomed out (with window.innerWidth == 1450px).

I've attached a test case that shows a similar result with just a body with min-width:1450px and enough text for it to wrap.

(In reply to Thomas Wisniewski [:twisniewski] from comment #4)

I've attached a test case that shows a similar result with just a body with min-width:1450px and enough text for it to wrap.

There is something else going on in this test case than just zoom level: in Chrome, the text wraps into 7 lines for me, and in Firefox 5 lines. The text size looks about the same, so perhaps Chrome is disregarding with min-width:1450px and wrapping the text earlier than that?

(In reply to Thomas Wisniewski [:twisniewski] from comment #4)

For instance, citilink.ru does not specify any meta viewport; it just sets the width of its header, footer and such to 1450px. Upon loading the page, Firefox ends up zooming in so some content is off-screen (with window.innerWidth < 1450px), while Chrome shows the full page zoomed out (with window.innerWidth == 1450px).

This deserves further investigation; it sounds like the mechanism added in bug 1423709 for determining the initial zoom level may not be working correctly on this page.

Moved citilink.ru case in bug 1553689.

See Also: https://webcompat.com/issues/27066 →

The granbluefantasy.jp site has <html lang="jp" style="zoom: 1.125;">, and the .wrapper div element's width is 320px, and 320px x 1.125 = 360px that is actually the phone's display width I am using. Is it a trick? I am not sure how they can calculate the zoom value though.

Hiroyuki,

they do it here computation and writing

  window.displayInitialize = function() {
    var deviceRatio = window.innerWidth / 320;
    return deviceRatio;
  };
  window.fitScreenByZoom = function(deviceRatio) {
    var html = document.getElementsByTagName("html")[0];
    html.style.zoom = deviceRatio;
  };

and they reuse the value here by reading it for setting preferences for the game initialization.

  Game.getZoom = fzunction() {
    // PC Web版のみ gameContainer を参照する
    return +$("html").css("zoom");
  };

as for the dependency on Zoom. Bug 390936 for my previous Comment #9

oops, sorry for the confusion. The html element with zoom value is what I can see on Chrome on the Android device. So presumably,

(In reply to Karl Dubost💡 :karlcow from comment #9)

and they reuse the value here by reading it for setting preferences for the game initialization.

  Game.getZoom = fzunction() {
    // PC Web版のみ gameContainer を参照する
    return +$("html").css("zoom");
  };

This code runs for Chrome on Android as well. (The comment implies it's only for Desktop though)

(In reply to Hiroyuki Ikezoe (:hiro) from comment #11)

(In reply to Karl Dubost💡 :karlcow from comment #9)

and they reuse the value here by reading it for setting preferences for the game initialization.

  Game.getZoom = fzunction() {
    // PC Web版のみ gameContainer を参照する
    return +$("html").css("zoom");
  };

Oh wait, fzunction ... Is it a valid function?? I am not sure.

yes, we can only see it on Chrome. But isn't it because this has no meaning in Firefox.

    html.style.zoom = deviceRatio;

In Chrome (Android)

14:51:36.942 var html = document.getElementsByTagName("html")[0];
14:51:36.948 undefined
14:51:44.811 html
14:51:44.816 <html lang=​"jp" style=​"zoom:​ 1.28438;​">​<head>​…​</head>​<body style>​…​</body>​</html>​
14:51:57.897 html.style.zoom
14:51:57.902 "1.28438"
14:52:15.415 html.style.zoom = 2
14:52:15.421 2
14:52:21.333 html
14:52:21.337 <html lang=​"jp" style=​"zoom:​ 2;​">​<head>​…​</head>​<body style>​…​</body>​</html>​

In Firefox (Android)

14:49:42.813 var html = document.getElementsByTagName("html")[0];
14:49:42.825 undefined
14:49:45.936 html
14:49:45.945
<html lang="jp">

14:49:57.029 html.style.zoom
14:49:57.037 1.284375
14:54:22.210 html.style.zoom = 2
14:54:22.221 2
14:54:25.070 html
14:54:25.079
<html lang="jp">

or maybe I misunderstood.

fzunction is a typo cut/paste from me. :) sorry about that.

Summary: Site with a fixed width is not zoomed in Firefox, zoomed in Chrome → Site with a fixed width is not zoomed in Firefox, zoomed in Chrome by CSS zoom property
status-firefox90: --- → affected
status-firefox91: --- → affected
status-firefox92: --- → affected
Webcompat Priority: revisit → P3
Depends on: csszoom

A web compat intervention for this is being added in bug 1722954

See Also: → 1722954
Severity: normal → S3

This appears to be fixed. The reported site breakage have been fixed a while ago, but also Tom's testcase from comment 4 now works: Firefox and Chrome show ~the same layout in both cases. I'll close this as worksforme.

Status: NEW → RESOLVED
Closed: 9 days ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: