Bug 240320 – Quirk flightaware.com to use old serialisation for number

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Matt Woodrow]

<rdar://92054921>

Flightaware is serialising matrix() style properties, and expecting the string comparison to match one created using JS string concatenation.

This was previously true, but regressed when bug 218880 changed CSS serialisation to match the spec.

We should detect flightaware and use the old serialisation, until the site can be fixed.

[Matt Woodrow]

Created attachment 459206 [details]
Patch

[Simon Fraser (smfr)]

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.

[Matt Woodrow]

Created attachment 459263 [details]
Patch

[Matt Woodrow]

Created attachment 459265 [details]
Patch

[EWS]

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].

[Karl Dubost]

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)

[Karl Dubost]

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

[Karl Dubost]

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);
```