Mac Retina上的CSS投影模糊，在低分辨率联想显示屏上清晰锐利

Question

我正在使用以下CSS将阴影应用到导航栏。

.navstyle {
    background-color: #EFEFEF;
    /* webkit filter syntax: x, y, blur radius */
    -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.5));
    filter: url(shadow.svg#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
    Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

在我的视网膜Macbook Pro 2013屏幕上，导航文字因投影（图1）而显得模糊。在我附加的低分辨率屏幕（lenovo）上，文字更清晰（图2）。这对我来说似乎违反直觉，任何人都可以提供有关文本在我的视网膜屏幕上看起来不好的原因吗？

Macbook Pro Retina Display屏幕截图

低分辨率联想显示