Chrome Version       : 55.0.2883.95
URLs (if applicable) : https://jsfiddle.net/9t03s3u1/1/
Other browsers tested:
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: OK
    Firefox: FAIL
         IE: Untested

What steps will reproduce the problem?
(1) Add two square elements side by side.
(2) Add the CSS property `filter: drop-shadow(0 5px 10px black)` to the first element and the CSS property `box-shadow: 0 5px 10px black;` to the second one.

What is the expected result?
The shadows should look almost identical aside from some minor rendering differences.

What happens instead?
The element with the CSS drop shadow filter has a blur radius that is 2x as large as the box shadow element, even though the shadow declarations are identical. If I decrease the shadow radius of the drop shadow by a factor of two, I get the expected result.

Please provide any additional information below. Attach a screenshot if
possible.
This was tested on a MacBook Pro with Retina display, so the increased pixel density may cause an issue. However, when I changed the screen to a native resolution, the issue still occurred.
The [W3C specification for CSS filters](https://www.w3.org/TR/filter-effects/#funcdef-drop-shadow) states that "values are interpreted as for box-shadow [CSS3BG]." Therefore, similar results should be expected from the two properties.

 

Deleted: Safari Results (OK).png 19.4 KB

	Safari Results (OK).png 19.4 KB View Download

Deleted: Chrome Results (FAIL).png 24.0 KB

	Chrome Results (FAIL).png 24.0 KB View Download

Deleted: Chrome Results (blur radius adjusted).png 19.0 KB

	Chrome Results (blur radius adjusted).png 19.0 KB View Download