Download option not working on Audio and Video tags in Chrome

I came across a strange issue lately. We have a page with the audio elements on it. By default, Chrome is displaying the “three dots” (ellipsis) menu on such an element. In this menu, there is a Download option. Our users are using this to download MP3 files we are serving. Unfortunately, after the recent theme change, this option stopped working. Instead, after clicking on the ellipsis menu, the page was jumping to the end of the content.

Download issue on audio element

Why is the page jumping?

The issue started when we switched from one theme to another. It was obvious that this has something to do with JavaScript or CSS changes. After a little bit of digging, I found the following statement:

body {
    filter: blur(0px);
}

After removing this one, the Download was working again 🙂

Be careful when using blur globally, it may break the download feature on your Audio and Video tags.