I have a Div that has a SVG as a background image and I am trying to set a drop shadow filter to it. It works in Chrome and Safari but for some reason in Safari it is very small. I tried changing things but got no result. Could it be because of the SVG. Or maybe a Mac's retina screen? But I'm viewing both browsers on the same screen. As of now I think its just a problem with Safari.

Chrome

Safari

Here's a 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*/

回答1:

Thank you Michael Mullany as his answer worked and as he suggested that Safari measures things differently. I decided to try to see if measuring using em would work better to compared to px and that worked great. Percentage doesn't work.

Doesn't render like Chrome on Safari

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

Renders the same in Both Chrome in Safari

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

回答2:

For some reason, Safari is choosing bad default units for the underlying filter calculation. You can fix this by changing the drop shadow to an explicit SVG filter. Add the following code to your HTML:

<svg x="0px" y="0px" width="0px" height="0px" width="0px" viewbox="0 0 200 200">
  <defs>
    <filter id="mydrop">
      <feComponentTransfer>
        <feFuncR type="linear" intercept="1"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="6"/>
    </filter>
  </defs>
</svg>

And change your filter property to: