Bug 240320

Created attachment 459206 [details]
Patch

Comment on attachment 459206 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=459206&action=review

> Source/WebCore/css/CSSValue.h:280
> +    mutable unsigned m_cachedCSSTextUsesQuirk : 1;

I think this needs to say what the quirk is, something like m_cachedCSSTextUsesLegacyPrecision or something.

Created attachment 459263 [details]
Patch

Created attachment 459265 [details]
Patch

Committed r294138 (250508@main): <https://commits.webkit.org/250508@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 459265 [details].

Some additional context

With a device where `window.devicePixelRatio` is `3`.
This is happening for embedded WebView on iOS applications such as United App.


This is happening in:
https://e1.flightcdn.com/include/d956df68dc71-maps/FAMap.js

with this function

```
      if (
        (i && i.canvas.style.transform === e
          ? ((this.container = t),
            (this.context = i),
            (this.containerReused = !0))
          : this.containerReused &&
            ((this.container = null),
            (this.context = null),
            (this.containerReused = !1)),
        !this.container)
      ) {
        (n = document.createElement("div")).className = o;
        var a = n.style;
        (a.position = "absolute"), (a.width = "100%"), (a.height = "100%");
        var s = (i = li()).canvas;
        n.appendChild(s),
          ((a = s.style).position = "absolute"),
          (a.left = "0"),
          (a.transformOrigin = "top left"),
          (this.container = n),
          (this.context = i);
      }
```

which is comparing:

i.canvas.style.transform 
    (matrix(0.333333, 0, 0, 0.333333, 0, 0)
with e 
    (matrix(0.3333333333333333, 0, 0, 0.3333333333333333, 0, 0)

but compared as strings


The matrix string is assembled by:

        function Je(t) {
            return "matrix(" + t.join(", ") + ")"
        }


in https://drafts.csswg.org/cssom/#serialize-a-css-component-value

`<number>`

   A base-ten number using digits 0-9 (U+0030 to U+0039) 
   in the shortest form possible, using "." to separate 
   decimals (if any), rounding the value if necessary to 
   not produce more than 6 decimals, preceded by "-" 
   (U+002D) if it is negative.

FlightAware could fix it by making sure to have the same number of decimals when they compute the numbers in:

e.prototype.renderFrame = function (t, e) {
  var r = t.pixelRatio,
    n = t.layerStatesArray[t.layerIndex];
  !(function (t, e, r) {
    We(t, e, 0, 0, r, 0, 0);
  })(this.pixelTransform, 1 / r, 1 / r),
    qe(this.inversePixelTransform, this.pixelTransform);
  var i = Je(this.pixelTransform);
  this.useContainer(e, i, n.opacity);

// cut for brevity

}


Specifically this line:

  })(this.pixelTransform, (1/r).toFixed(6), (1/r).toFixed(6) ),

That would probably help a lot. 


Note that Firefox, and probably chrome may have the same issue.
matrix(0.333333, 0, 0, 0.333333, 0, 0) matrix(0.3333333333333333, 0, 0, 0.3333333333333333, 0, 0)

I opened https://github.com/webcompat/web-bugs/issues/114576

They fixed it. 
Their new code.


```
var r = t.pixelRatio,
                        n = t.layerStatesArray[t.layerIndex];
                    !function(t, e, r) {
                        We(t, e, 0, 0, r, 0, 0)
                    }(this.pixelTransform, (1 / r).toFixed(6), (1 / r).toFixed(6)),
                    qe(this.inversePixelTransform, this.pixelTransform);
                    var i = Je(this.pixelTransform);
```