视网膜上的CSS3滤镜下垂阴影半径与非视网膜相比

Question

Chrome上的阴影滤镜在视网膜上的模糊半径小于非视网膜上的模糊半径。野生动物园似乎没有问题。

CSS：

.logo-head svg {
  fill: #FFF;
  -webkit-filter: drop-shadow(0 12px 24px #000);
     -moz-filter: drop-shadow(0 12px 24px #000);
          filter: drop-shadow(0 12px 24px #000);
}

Retina Display：

非视网膜显示：

有人对此有解决方法吗？我进入谷歌的所有内容都解决了另一个SVG问题，因为过滤器导致实际的SVG变得模糊。

Answer 1

问题可能是视网膜的像素比率更高。尝试媒体查询，然后将视网膜的值加倍。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* RETINA, YOU'RE SO SPECIAL */
}