css - 与 Chrome 相比，Safari 的投影非常小

Question

我有一个以 SVG 作为背景图像的 Div，我正在尝试为其设置投影过滤器。它适用于 Chrome 和 Safari，但由于某种原因在 Safari 中它非常小。我尝试改变事物但没有结果。可能是因为SVG。或者也许是 Mac 的视网膜屏幕？但是我在同一个屏幕上查看两个浏览器。截至目前，我认为这只是 Safari 的问题。

Chrome

Safari

这是一个 jsFiddle:http://jsfiddle.net/cTm52/3/

HTML

<div class="avatar-holder" style="height: 74px; width: 74px;" id="DIV_1">
<div class="shadow-holder" style="height: 74px; width: 74px;" id="DIV_2">
</div><div class="cut-gloss" style="height: 74px; width: 74px;" id="DIV_3">
<div class="add-gloss" style="height: 74px; width: 74px;" id="DIV_4"></div></div>
<img alt="" src="Image URL" class="image-preview image-preview avatar avatar-74 photo" height="74" width="74" originals="74" scale="4" id="IMG_5"></div>

CSS

#DIV_1 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
}/*#DIV_1*/

#DIV_2 {
    background: rgba(0, 0, 0, 0) url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) no-repeat scroll 50% 50% / 98% 98% padding-box border-box;
    background-size: 98% 98%;
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-background-size: 98% 98%;
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-filter: drop-shadow(rgb(255, 0, 0) 0px 0px 6px);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 0;
}/*#DIV_2*/

#DIV_3 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-mask-box-image: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) 0 fill / auto / 0px stretch;
    -webkit-mask-box-image-source: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg);
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 1;
}/*#DIV_3*/

#DIV_4 {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgba(255, 255, 255, 0.298039) 55%, rgba(255, 255, 255, 0) 60%) repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    position: absolute;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 999;
}/*#DIV_4*/

#IMG_5 {
    border: 0px none rgb(20, 20, 18);
    color: rgb(20, 20, 18);
    font: normal normal normal 12px/9px 'Source Sans Pro', Helvetica, sans-serif;
    height: 74px;
    line-height: 9px;
    outline: rgb(20, 20, 18) none 0px;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 18);
    vertical-align: middle;
    -webkit-column-rule: 0px none rgb(20, 20, 18);
    -webkit-locale: en-US;
    -webkit-mask-box-image: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg) 0 fill / auto / 0px stretch;
    -webkit-mask-box-image-source: url(http://techdigy.com/wp-content/plugins/avatarshaper/img/heptagon.svg);
    -webkit-perspective-origin: 37px 37px;
    -webkit-text-emphasis-color: rgb(20, 20, 18);
    -webkit-text-fill-color: rgb(20, 20, 18);
    -webkit-text-stroke-color: rgb(20, 20, 18);
    -webkit-transform-origin: 37px 37px;
    width: 74px;
    z-index: 0;
}/*#IMG_5*/

Answer 1

感谢 Michael Mullany，因为他的回答很有效，并且他建议 Safari 以不同的方式衡量事物。我决定尝试看看使用 em 进行测量是否比使用 px 测量效果更好，而且效果很好。百分比不起作用。

在 Safari 上的呈现方式与 Chrome 不同

-webkit-filter: drop-shadow(#00d33f 0px 0px 10px);

在 Safari 和 Chrome 中呈现相同的内容

-webkit-filter: drop-shadow(#00d33f 0px 0px .8em);