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