Safari的下拉阴影与Chrome的相比非常小 [英] Safari's drop shadow is very small compared to Chrome's
本文介绍了Safari的下拉阴影与Chrome的相比非常小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个Div有一个SVG作为背景图像，我试图设置一个阴影过滤器。它的工作原理在Chrome和Safari，但由于某种原因在Safari它是非常小。我试着改变事情，但没有结果。可能是因为SVG。还是Mac的视网膜屏？但我在同一个屏幕上查看两个浏览器。到目前为止，我认为它只是一个问题与Safari。
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.
这里有一个jsFiddle： http://jsfiddle.net/cTm52/3/
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*/
推荐答案
谢谢Michael Mullany作为他的回答工作，因为他建议Safari测量的东西不同。我决定尝试看看如果使用em测量会更好地与px相比，并且工作得很好。百分比不起作用。
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.
不会在Chrome上呈现Chrome 。
-webkit-filter: drop-shadow(#00d33f 0px 0px 10px);
在Safari中的Chrome中呈现相同
$ b
Renders the same in Both Chrome in Safari
-webkit-filter: drop-shadow(#00d33f 0px 0px .8em);
这篇关于Safari的下拉阴影与Chrome的相比非常小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
