2

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

enter image description here

Safari

enter image description here

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*/

2 Answers 2

2

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);
0
1

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:

-webkit-filter: url(#mydrop);

Full fiddle: http://jsfiddle.net/cTm52/5/

2
  • Works. However, when you highlight the image or select all and then unselect, some of the shadow will cut off. Commented Nov 16, 2013 at 2:07
  • The only solution I found to the filter getting messed up when selected and unselected is disabling the container's selection option using CSS: filter not selectable svg -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; Commented Nov 16, 2013 at 4:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.