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

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!

Gregor

Hi. Do you still need help on this?

Which safari/chrome version did you use?

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?

Best,

Gregor

@Tonmeister Is the issue resolved? I am also facing the same issue. Could you please provide an update on this? Thanks.