Description of problem:
Using Firefox, empty unclickable buttons appear wherever there is a drop zone. I see the css for the input element is set to opacity: 0.00001; Changing this to opacity: 0; fixes the problem.
I can’t replicate either. Tested on Windows 10, 64bit with latest Firefox 88.0.1, 64bit.
@wouterkoch Try testing it in a private window (Options button → New private window) which will disable extensions and will open the browser in a “clean state”.
Also, it’s helpful to know the operating system on which the problem occurs. The browser might behave differently on different OSes.
I can reproduce this issue in Firefox 88.0.1 on Arch Linux. Setting the opacity to zero also fixes the problem. Running the browser in safe-mode makes no difference.
I thought that the exact behaviour of opacity could depend on the system’s compositor implementation to some extent, which might have explained why it can’t be reproduced on some other platforms. But then I found I couldn’t reproduce the problem in a Chrome-based browser running on the same system.
Setting the opacity to zero on the highlighted element makes the empty button disappear.
I suppose the key question is: does the opacity really need to be set to 0.00001 for some reason? When I set it to zero in Firefox on Linux, the drag and drop still works as expected for me. But maybe there are some other combinations of platform/browser where that is not the case.
I can also confirm this in Firefox 88.0.1 64-bit on Linux Mint. This has been going on for a few weeks now - I was hoping it would go away before I got around to reporting it . I just checked for it in Chrome 90.0 on Linux Mint - no problem there.
in Firefox on Linux, if you go to Help > More Troubleshooting Information, what is the User Agent string that you see? is it something like below, or is it something else entirely?
Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0
I tried temporarily downgrading to Firefox 87.0 and the problem disappears. So this seems to be caused by a recent change in the Linux version of Firefox. Since it’s just a minor cosmetic issue, I decided to use the Stylus Add-on to fix the problem for myself. This is what I used:
@-moz-document domain("inaturalist.org") {
/* fix empty button in drop zones*/
div.dropzone input, div.uploader input {opacity: 0 !important}
}
I was offline for a while there, sorry. By now it seems to be confirmed by others that this does occur on FF 88 for Linux, thanks for confirming! The provided screenshot was already taken from a private browser session.
User Agent:Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0 OS:Linux 4.15.0-143-generic #147-Ubuntu SMP Wed Apr 14 16:10:11 UTC 2021
I suspect this was done to prevent issues with something like the screenreader ChromeVox, which skips rendering of anything with opacity: 0; altogether (https://github.com/michalsnik/aos/issues/397)
. I just checked for it in Chrome 90.0 on Linux Mint - no problem there.