CSS Drop Shadow Breaks on Mobile | Next.js

Question

Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.

This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.

The current effect being used is

filter: drop-shadow(20px 10px 4px #707070);