Jump to content

all of a sudden: iPhone iOS 14 won't render box shadow

Recommended Posts

Site URL: http://www.rotor-film.de

Dear All,

Today I noticed a display error on my website, when opening from iPhone (both Safari and Chrome). 
The Error did not occur about a month ago, so perhaps my upgrade to iOs14 had sth to do with it / or sth within Squarespace changed.

All my box-shadows won't render anymore on iPhone:


On desktop it looks like this:


I coded the box-shadow as a background for the text. Notice that I set the height to 0!important. That way I don't have a square div, with a box shadow around it, but instead I get just a "cloud" shadow:

.gallery-caption {
    width: 28em;
    height: 0!important;
    -webkit-box-shadow: 100px 20px 120px 170px rgba(0,0,0,0.75)!important;
    -moz-box-shadow: 100px 20px 120px 170px rgba(0,0,0,0.75)!important;
    box-shadow: 100px 20px 120px 170px rgba(0,0,0,0.75)!important;

I notice, that when I set height to anything but 0 (e.g. 1em), the box shadow renders correctly again even on iPhone! However, for my purposes I need it to be 0, in order for it to look like a cloud.

Do you have any suggestions?

All the best + Thanks in advance!


Link to comment
  • Replies 3
  • Views 1.7k
  • Created
  • Last Reply
  • 3 weeks later...

Yes I still need help!

I use Chrome version 87.4280.77 and Safari version 14. The change happened when I upgraded my iPhone to iOS 14:

When height of a div is set to "0", box shadow will not be rendered, instead I get a grey box. On any desktop browser it's rendered correctly, even if I simulate iPhone in chrome -> developer tools -> devices.

Any ideas on how I could fix this?





Link to comment
  • 3 weeks later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.