material_3_demo isn't clickable in Firefox

[feinstein]

I am running Firefox 129.0.1 (64-bit) in MacOS 14.5, and I can't click the demo. It works fine in Chrome.

Rendering doesn't look correct too. I wonder if this is a deeper issue than the demo itself.

[domesticmouse]

Can you explain what exactly you are attempting to do? I' attempting to recreate on Firefox 129.0.1 (64-bit) on macOS 14.6.1 (23G93) but I'm not seeing any issues.

brett

[feinstein]

Hey Brett, I am not doing anything besides loading the website tbh.

This is how it looks when I open it:

I am using a private window here to be sure it's not an extension causing any problems.

I am in Surry Hills if you want to take a look lol

[feinstein]

@domesticmouse I think I figured it out, it happens when opened in an external monitor... I remember seeing this error before, maybe with dartpad, and this gave me the idea of testing if it was the external monitor.

[domesticmouse]

That's whack. What kind of external monitor are you using? I'm running on external dell monitors with no issues.

[feinstein]

LG 4k, more specific: 27UP550N

[feinstein]

Ok, I think this is connected to my setup, but I am not sure if it's a problem on Firefox, or Flutter (probably Flutter, as I have never seen this happen with other websites).

I use https://rectangleapp.com/ to snap my windows and move them between monitors, using keyboard shortcuts. This issue appears to be related to when I snap and maximise Firefox using shortcuts.

If I reposition Firefox and move it around manually, double-click to maximise, it works fine. But when I use the shortcuts to send Firefox to the external monitor, maximise it with a shortcut, then when I open the demo, or dartpad, it shows this bug.

Maybe Firefox isn't "communicating" its size change correctly, when not done via mouse, for wasm?

[domesticmouse]

Just to clarify, using Rectangle to shunt Firefox between monitors puts Flutter in a bad state? I'm guessing you aren't seeing this behaviour from Flutter in Chrome when using Rectangle to bump from internal to external monitor?

It'd be worth trying with other WASM / WebGL apps like Figma to see if you can replicate this issue. It almost smells like a Firefox bug?

ps: once we have a replication strategem, this bug should probably be punted to flutter/flutter issue tracker, as I doubt this issue is specific to this sample app.

/cc @kevmoo

[feinstein]

Yeah, I don't see this on Chrome. I use Figma everyday, haven't seen this so far, but will do some extra tests just to be sure.

I remember seeing that Firefox had some incomplete APIs for Flutter wasm when it was launched, I don't remember what though, hope this is not related.

Let me do some more tests, then I will bump this to the Flutter repo. Thanks @domesticmouse!