filter:drop-shadow () not working in Chrome

Question

I've been examining in depth the CSS filter property these days. I've written down some code just to make some tests. The following is a simple piece of code pertinent the drop-shadow filter:

HTML

<div class="rounded"></div><div class="bubble"></div>

CSS

div.rounded{
    width: 300px;
    height: 100px;
    background:red;
    display: inline-block;
}

div.bubble{
    border: 20px solid transparent;
    border-left: 20px solid red;
    display: inline-block;
    position: relative;
    top:-40px;
    -webkit-filter: drop-shadow(50px 50px 50px 10px blue);
    filter: drop-shadow(50px 50px 10px blue);
}

As you can see from the attached image filter:drop-shadow(), it works fine in Firefox (on the right of the image) but not in Chrome (on the left of the image). I'm not interested in IE at the moment.

What could be the problem in your opinion?