Could it be the same issue as #208? Depending on people's display and context, there seems to be an issue in Firefox between the visuals and interactions.

It might be, I do think I had a similar problem in some other places, like with selecting text in the text area in the practices. I don't remember it being as big as a difference between where the mouse is shown and where it is highlighting then the top right buttons though.

There might also be a difference with #208 because that seems to only be vertical difference, but I was talking about a horizontal difference, so that might make it a different cause. They do sound similar though, I just figured that they were different enough to make a new issue about it.

Just found out the buttons on the top left are misaligned the opposite way as the buttons on the top right. My guess is that the button is proportionate to the width of the screen, but the scaling with the black bars on the left and right side of the screen mess up where it is displaying it as.

I also tested making it full screen so that there are no black bars (it seems to be locked to an aspect ratio) and the buttons match up with the mouse now.

I see, then I think it's the same or a related issue.

@Xananax is this + #208 something you could look into? The app's interactivity gets offset from the UI components' visuals in Firefox.

Is this still happening with the latest staging version? You can test here: https://gdquest.github.io/learn-gdscript/staging/

We made some changes that could help, although not sure - we can't reproduce the issue in the team.

It seems to still be there in the current staging version. The area to click for the button to be responsive becomes more out of sync the wider the window, It is a lot less noticeable now that the button is wider. For some reason for me, the white highlight stays active after the first time I hover over again, and only resets when I reload the screen. There is also a strange problem that when I make my window maximised, the full-screen button disappears, this is also the case when you make the screen wide enough.

I can't see anything that could be casuing this issue specificly for my environment, I have tried it in a private browser with all extensions disabled, I even tried uninstalling the custom firefox themeing that Manjaro puts on firefox (firefox-gnome-theme-maia package) and ruinngng it though the flatpak version of firefox. My only guess is that maybe this has something to do with me running on wayland, but I don't know why that would be casuing problems with this.

I could finally reproduce this after some testing, by making the window larger than one display (I worked with a single display until recently).

It seems to me it's just Firefox stretching the input coordinates/interactions as if the app was taking the whole window. It doesn't seem linked to wayland as I run on X11.

Could you try this? if you resize the window so that there are no black bars on the left and right, is the input OK? Not maximized, not fullscreen. For me it works fine in that case. Example:

@Xananax could you also test this? In Firefox, making the window such that there are black bars on the sides causes the interaction boxes to stretch past the viewport/iframe.

Just opened another issue for the fullscreen toggle button: #315

Sizing the window so that it doesn't have any black bars does remove the problem with the clickable areas not matching up with the UI (just tested with staging), but I did mention this previously so it hasn't changed in that.

I also tested making it full screen so that there are no black bars (it seems to be locked to an aspect ratio) and the buttons match up with the mouse now.

I noticed I couldn't at all obtain the correct Canvas width and height in Firefox. No matter what I did or how I tried to measure it, measurements were wrong.

So I changed the scaling method; ditched CSS entirely, and resize the Godot app through Javascript. This allows Firefox to get clear values for width and height, at the price of more choppiness during resizes. In theory, it should fix this misalignment problem.

At any rate, I am unable to reproduce it after this change. Please check staging and tell me if you still encounter the same behavior.

I can't reproduce the issue anymore with the latest changes, good job!