Bug 240320 - Quirk flightaware.com to use old serialisation for number
Summary: Quirk flightaware.com to use old serialisation for number
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Matt Woodrow
URL:
Keywords: InRadar
Depends on: 218880
Blocks: 249376
  Show dependency treegraph
 
Reported: 2022-05-11 16:02 PDT by Matt Woodrow
Modified: 2022-12-15 00:00 PST (History)
11 users (show)

See Also:


Attachments
Patch (14.51 KB, patch)
2022-05-11 20:45 PDT, Matt Woodrow
simon.fraser: review+
Details | Formatted Diff | Diff
Patch (16.12 KB, patch)
2022-05-12 17:43 PDT, Matt Woodrow
no flags Details | Formatted Diff | Diff
Patch (14.56 KB, patch)
2022-05-12 17:47 PDT, Matt Woodrow
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Woodrow 2022-05-11 16:02:08 PDT
<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.
Comment 1 Matt Woodrow 2022-05-11 20:45:10 PDT
Created attachment 459206 [details]
Patch
Comment 2 Simon Fraser (smfr) 2022-05-12 17:19:51 PDT
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.
Comment 3 Matt Woodrow 2022-05-12 17:43:54 PDT
Created attachment 459263 [details]
Patch
Comment 4 Matt Woodrow 2022-05-12 17:47:56 PDT
Created attachment 459265 [details]
Patch
Comment 5 EWS 2022-05-12 18:50:43 PDT
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].
Comment 6 Karl Dubost 2022-11-23 21:31:40 PST
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)
Comment 7 Karl Dubost 2022-11-23 21:43:07 PST
I opened https://github.com/webcompat/web-bugs/issues/114576
Comment 8 Karl Dubost 2022-12-14 23:52:45 PST
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);
```