Inset box-shadow rendering bug on Safari iOS 13.4

After we updated our iPhones to iOS 13.4, we found that Apple introduced a bug in the rendering of boxes with specific CSS properties for the box-shadow rule.

After we found the problem on some websites, we created a new Codepen to isolate and identify the problem. Here’s what we found out.

TL;DR: A black bar appears when applying a box-shadow rule with an inset value and a large negative spread-radius.

The spread-radius is the fourth length value. Positive values will cause the shadow to expand…