Bug 266934 – Progress (Percentage) is not centered in loading bar in HTML5 game

• Status: NEW
• Component: Layout and Rendering

[Ahmad Saleem]

Hi Team,

While stumbling into 'HTML5 game' in URL field, I noticed that Safari Technology Preview 184 and Safari 17.2.1 don't show 'percentage' in centered but it touches bottom baseline.

Attaching reference screenshot.

Chrome Canary 122 and Firefox Nightly 123 both have it correct.

Just wanted to raise so we can fix it.

Thanks!

[Ahmad Saleem]

Created attachment 469241 [details]
Safari Reference Screenshot

[Radar WebKit Bug Importer]

<rdar://problem/120552577>

[Karl Dubost]

The initial html, basically contains only this:

```
<canvas 
   id="canvas" 
   width="1120" height="768" 
   style="left: 113px; top: 11px; position: absolute; cursor: default;"></canvas>
```

This is initiated at the beginning by:

```
function init() {
    var a = getScreenSize();
    screenX1 = a.x;
    screenY1 = a.y;
    canvasReSize();
    createStage();
    setBackground();
    initAutoDemoRnd();
    loadStoreVariable();
    initMenuVariable();
    getLastPlayInfo();
    initDemoData();
    getEditLevelInfo();
    showLoadingPage()
}
```

This function seems to have a promising name:
    showLoadingPage()

Indeed typing it in the console and it restarts the loading screen.

the definition is inside
https://loderunnerwebgame.com/game/lodeRunner.preload.min.js?060821142151

```
function showLoadingPage() {
  var a = [
    {
      src: "image/cover.png" + noCache,
      id: "cover",
    },
    {
      src: themeImagePath + THEME_APPLE2 + "/runner.png" + noCache,
      id: "runner",
    },
  ];
  coverPageLoad = new createjs.LoadQueue(!0);
  coverPageLoad.on("error", function (c) {
    console.log("error", c);
  });
  coverPageLoad.on("fileload", function (c) {
    switch (c.item.id) {
      case "cover":
        coverBitmap = new createjs.Bitmap(c.result);
        coverBitmap.setTransform(0, 0, tileScale, tileScale);
        c = (coverBitmap.getBounds().width * tileScale) | 0;
        var f = (coverBitmap.getBounds().height * tileScale) | 0;
        titleBackground = new createjs.Shape();
        titleBackground.graphics.beginFill("white").drawRect(0, 0, c, f);
        mainStage.addChild(titleBackground);
        mainStage.addChild(coverBitmap);
        mainStage.update();
        break;
      case "runner":
        createRunnerSpriteSheet(c.result);
    }
  });
  coverPageLoad.on("complete", function (c) {
    preloadResource();
  });
  coverPageLoad.loadManifest(a);
}
```

https://loderunnerwebgame.com/game/image/cover.png
is just all the text without the loading bar. 

The progress bar is drawn by 

```
    preload.on("progress", function(b) {
        g.graphics.clear();
        g.graphics.beginFill("gold").drawRect(0, 0, b.loaded /
        b.total * l, k);
        d.text = (b.loaded / b.total * 100 | 0) + "%";
        d.x = (canvas.width - d.getBounds().width) / 2 | 0
    }
```

there's a function for LineHeight, but if I change the value manually it doesn't affect the position. 

```
    b.getMeasuredLineHeight = function() {
        return 1.2 * this._prepContext(a._workingContext).measureText("M").width
    },
    b.getMeasuredHeight = function() {
        return this._drawText(null, {}).height
    },
```

The value is: 26.65625

The font used for the progress bar is 
font: "32px Arial"


So I wonder if it's a simple difference in between browsers. 

Ah! on Firefox this is 
font: "30.4px Arial"

The computation of the size is made in:

        d = new createjs.Text("0", COVER_PROGRESS_BAR_H * tileScale + "px Arial", "#FF0000"),


with 
    COVER_PROGRESS_BAR_H = 32,

so the changing parameter is tileScale

1    in Safari
0.95 in Firefox


tileScale seems to be defined in

```
  for (
    var a, d = 100 * MAX_SCALE;
    d >= 100 * MIN_SCALE &&
    !((tileScale = d / 100),
    (canvasX = BASE_SCREEN_X * tileScale),
    (canvasY = BASE_SCREEN_Y * tileScale),
    (a = 2 * BASE_ICON_X * tileScale),
    (canvasX + a <= screenX1 && canvasY <= screenY1) || tileScale <= MIN_SCALE);
    d -= 5
  );
  debug("SCALE=" + tileScale);
  screenBorder = (screenX1 - (canvasX + a)) / 2;
  screenBorder > 2 * ICON_BORDER
    ? (screenBorder = 2 * ICON_BORDER)
    : 0 > screenBorder && (screenBorder = 0);
  screenBorder = (screenBorder * tileScale) | 0;
  canvas = document.getElementById("canvas");
  canvas.width = canvasX;
  canvas.height = canvasY;
  a = ((screenX1 - canvasX) / 2) | 0;
  d = ((screenY1 - canvasY) / 2) | 0;
  canvas.style.left = (0 < a ? a : 0) + "px";
  canvas.style.top = (0 < d ? d : 0) + "px";
  canvas.style.position = "absolute";
  canvas.style.cursor = "default";
  tileW = BASE_TILE_X;
  tileH = BASE_TILE_Y;
  tileWScale = BASE_TILE_X * tileScale;
  tileHScale = BASE_TILE_Y * tileScale;
  W2 = (tileW / 2) | 0;
  H2 = (tileH / 2) | 0;
  W4 = (tileW / 4) | 0;
  H4 = (tileH / 4) | 0;
}

```


aka 

    var a, d = 100 * MAX_SCALE;
    d >= 100 * MIN_SCALE &&
    !((tileScale = d / 100),

[Karl Dubost]

when I set Firefox with "32px Arial", the error reproduces on Firefox. 
So why is this different in Firefox and Safari.