Firefox has killed the Html components transform prop

Questions
1

@drcmda have you seen this? It’s causing a P1 on my end unfortunately. Not something you can fix but something you should know about.

https://drei.pmnd.rs/?path=/story/misc-html--html-transform-st

Load up that in Firefox, so Firefox can’t handle matrix3d at all. I need to try and convert my app to distanceFactor as a fallback, for reference you can see it live here, which runs fine in Chrome.

https://www.spark.co.nz/online/beyondbinarycode/

So I guess this serves as a warning to others. Here’s some keyword fodder: Firefox, matrix3d, Html, transform, blurry, pixelated, low resolution

2

a bit out of the loop but i saw people discuss about this (i think) and that there was a bug fix that will be in the next FF release? i mean, they can’t just decide not to handle css matrix transforms, or blur them. though these days it feels like browser vendors can do whatever they want …

3

I know, this was previously an issue but only happened when you used border-radius on an object that had matrix transforms. In which case it’d actually draw a pixelated block in place of the rounded edge. Any idea where you saw the discussion? it might save me a couple days of work

4

pmndrs discord:

@BruceX @Faraz An update about the <Html> component having problems in Firefox. The bug has been submitted to Mozilla and is being tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1764875

…

SteveS — 04/24/2022 @BruceX @Faraz Looks like the bug with <Html /> is resolved in Firefox 101.0a1 available on the current Firefox nightly build.
BruceX — 04/24/2022
oh great, i use the stable version so don’t have the fixes yet but i guess it will be merged pretty soon hopefully. thank you again btw.
SteveS — 04/24/2022 Yeah, looks like v101 is slated to be released on May 31st

1 Like
5

Thanks man, that’s a lot of help