Dropzones shows as empty button in Firefox

Platform (Android, iOS, Website): Website

App version number, if a mobile app issue (shown under Settings or About):

Browser, if a website issue (Firefox, Chrome, etc) : Firefox

URLs (aka web addresses) of any relevant observations or pages: https://www.inaturalist.org/observations/upload and all other places with a drop zone (such as viewing my own observations)

Screenshots of what you are seeing:
Screenshot from 2021-05-13 17-42-09

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.

1 Like

i can’t reproduce the problem. are you using some extensions on your browser?


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.

Here is the relevant section of HTML in Firefox:

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.

1 Like

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 :grinning:. I just checked for it in Chrome 90.0 on Linux Mint - no problem there.

1 Like

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

On my machine:

User Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0
OS Linux 5.4.0-73-generic #82-Ubuntu SMP Wed Apr 14 17:39:42 UTC 2021

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)

1 Like

Yes, I reached the same conclusion. There’s a fix related to screen readers mentioned in the Firefox 88.0 release notes that seems pertinent.

1 Like

This is no longer an issue after the update to Firefox for Linux v. 89.0 that came out today.