CSS 移动设备上的阴影中断 | Next.js

Question

编辑：我发现这个问题是 iPhone 独有的。我用 android 设备进行了测试，当我尝试在两部不同的 iPhone 上查看页面时，它工作正常。

此问题与移动设备相关，因为当我将浏览器 window 缩小到移动屏幕的大小时，一切看起来都很好。但是，当我在我的实际移动设备上查看该网站时，投影在看似随机的地方“中断”。如果我放大和缩小这些中断将改变它们的位置。

当前使用的效果是

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

Answer 1

经过进一步研究，我发现这个问题并不是我的网站特有的。如果你在最近的 iPhone 设备上使用 Mozilla MDN Docs，你会注意到它在放大时给你完全相同的效果。我将 post 这作为一个问题根据文档中的建议，在 Github 上。这是我的手机 phone 在查看 Firefox 徽标投影效果时显示的内容。

正如评论中所建议的那样，更改为简单的 box-shadow 解决了这个问题，尽管边缘更多 hard-lined 并且褪色稍少（使用相同的参数）。仅仅破坏这个特定项目是不够的，我知道有 CSS 可用的功能可以增强它，所以一切都很好！