CSS Drop Shadow Breaks on Mobile | Next.js

Issue

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);

Solution

After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.

As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!

Answered By - Jacob