0

I have problem because shadow in my components doesnt work on safari.

I tried to change box-shadow to filter: drop-shadow() but this doesnt work in internet explorer 11.

box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12);

Do you know some similar command that I can swap and show same effect as box-shadow?

Himanshu padia
  • 7,428
  • 1
  • 47
  • 45
  • You can see actual browser support & known issues for the box-shadow here: https://caniuse.com/#feat=css-boxshadow – Hunor Jul 17 '19 at 06:55

1 Answers1

1

Here's a good link: https://css-tricks.com/almanac/properties/b/box-shadow/

.shadow {
  -webkit-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.12);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0 1px 7px 0 rgba(0, 0, 0, 0.12);  /* Firefox 3.5 - 3.6 */
  box-shadow:         0 1px 7px 0 rgba(0, 0, 0, 0.12);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Update: You can see the actual browser support and known issues here: https://caniuse.com/#feat=css-boxshadow

Update2: You can check this thread also - it may contain relevant info to you regarding the safari problem (color, sizes, etc.). The 0.12 may be a to small shadow for safari, according to the 1st answer. css box shadow property is not working in safari

Hunor
  • 449
  • 1
  • 5
  • 19
  • How to set shadows for many browsers that them don't duplicate themself? Eg ie, mozilla, chrome, safari on mac etc –  Jul 17 '19 at 07:21
  • What do you mean by "duplication"? The shadow is darker, or what happens? It shouldn't be duplicated - because each browser should have it's on rule from above. Maybe you can find this one useful: https://stackoverflow.com/questions/13127748/box-shadow-on-inputs-in-chrome – Hunor Jul 17 '19 at 07:29
  • If in mozilla work box-shadow, and in my css there are box-shadow, and -moz-box-shadow, what will happen then? –  Jul 17 '19 at 07:32
  • It will first try to use the simple "box-shadow", if possible (I think). If the browser version is older (and "box-shadow" is not recognized in the given browser) it will use the -moz / -webkit alternative. Check this page to see what&where will work: https://caniuse.com/#feat=css-boxshadow – Hunor Jul 17 '19 at 07:35