Drop Shadows on Images in Safari

Site URL: http://www.thepeak1group.com/home

Hi there,

I'm using the following CSS code (in Custom CSS under the Design tab, in a 7.0 Brine family site) to add drop shadows to specific images:

Quote

#BLOCK-ID-# { filter: drop-shadow(10px 10px 3px #a0a0a0)}

This works *perfectly* on Chrome and I never realized there were issues with it until working with a client this week who primarily uses Safari (I work on Chrome) -- he noticed that there were "breaks" in the drop shadows across the site where I'd used the code to create the shadows. I even tried a code to add drop shadows to ALL images universally (instead of using block IDs to isolate specific ones) and still ran into issues...but only on Safari.

Is there a fix for this? Or something that needs to get added/edited/removed from the code that would enable Safari to recognize it and implement it correctly? Or another code entirely that would help Safari read it correctly? This is my first time running into cross-browser issues.

Attaching an image from each browser for a "shadow break" example.

Thanks so much!

Try this code

#BLOCK-ID-# { 
  -webkit-filter: drop-shadow(10px 10px 3px #a0a0a0); 
  filter: drop-shadow(10px 10px 3px #a0a0a0);
}

@tuanphanAhh unfortunately still getting those weird shadow breaks in Safari. Thanks for the help though!