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