LiveSplit / livesplit-core

livesplit-core is a library that provides a lot of functionality for creating a speedrun timer.
https://livesplit.org/
Apache License 2.0
209 stars 57 forks source link

Web renderer breaks when dom.textMetrics.fontBoundingBox is disabled #842

Closed themmj closed 18 hours ago

themmj commented 4 days ago

Symptom: A blank page after the initial loading screen with Uncaught TypeError: CanvasRenderingContext2D.createLinearGradient: Argument 2 is not a finite floating-point value. in the console.

Steps to reproduce Using Waterfox as the browser, open https://one.livesplit.org/ Alternatively, disable dom.textMetrics.fontBoundingBox.enabled in about:config and open https://one.livesplit.org/

Root cause CanvasFont's top and bottom attribute are determined by TextMetrics.fontBoundingBoxAscend/Descend. This is an experimental feature that is disabled by default for some browsers (e.g. Waterfox). If they are disabled, the Javascript-Structure for TextMetrics does not contain fontBoundingBoxAscend/Descend properties. As a result top and bottom are populated with NaNs. These values are eventually used to set the y-bounds on a CanvasLabel which will be passed to createLinearGradient.

Workaround Set dom.textMetrics.fontBoundingBox.enabled in about:config to true.

Comments The easiest solution would be to set top and bottom to 0 if they are NaN. Optionally, fall back on actualBoundingBoxAscend/Descend beforehand which seem to be enabled by default on a lot more browsers. The FIXME above these calls suggests that it shouldn't be done like that anyway. Let me know if I should proceed with the simple fix as a PR or if a more elaborate fix is preferred.

CryZe commented 20 hours ago

Nothing here seems to indicate that it's experimental: https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/fontBoundingBoxDescent

However, it seems like Firefox implemented it fairly late, so maybe Waterfox is lagging behind?

themmj commented 19 hours ago

Yes I worded that a bit misleading. Waterfox has marked these features as experimental. I assume it is just lagging behind. Though it should be noted that specific users/browsers may disable this feature by default because it can be used for fingerprinting. I still think it makes sense to safeguard this so a gradient doesn't potentially break everything. What's your stance on this?

CryZe commented 18 hours ago

Generally I'm somewhat against implementing workarounds for all sorts of special browsers. If you use a special browser, you know what you are getting yourself into. However, I would want to fix it if the following are true:

  1. This is intentionally turned off for fingerprinting reasons (i.e. can you confirm with them they are not lagging behind).
  2. This is a common thing that these browsers with tracking prevention do (i.e. can you confirm other browsers have the same issue).
  3. The workaround would be in a cold code path (i.e. not happening multiple times every frame).
themmj commented 18 hours ago

That's fair. After checking futher, it seems Waterfox also enabled this feature: https://github.com/BrowserWorks/Waterfox/commit/b459c274bc75b420755c8c70b708c40c1da0ab1f So I assume, these settings are not updated as part of the regular update process.. Considering point 1 is not true, it's not worth checking the rest. Let me close this issue then. This has a workaround documented here for those few that are affected. Thanks for taking the time to look at this!