Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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:


#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!

Safari Image.png

Chrome Image.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

Try this code

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


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...