移动Safari悬停/链接问题

Question

所以，这是我在移动版Safari上遇到的一个奇怪的问题-我怀疑这是所有原因的根本原因，但未能弄清楚：

• 包装图像的链接不能覆盖整个宽度和高度（如下面的屏幕截图所示），仅覆盖左上角
• 链接按钮仅在左半部分起作用
• 链接：悬停将悬停在悬停上，您必须按下

更糟的是，本来可以模拟iPhone的开发工具没有显示任何时髦的东西（应该链接整个图像/按钮等），但是当您将该站点与实际设备一起使用时，会发生上述情况。

我知道，我知道，这听起来像是一个基本问题，但是我已经将头撞了两天了。

这是我的测试页，但您会在整个网站上间歇性地看到它：https://redcowmn.com/testing-safari-ios-issue/

是否有乱码告诉Safari行为异常？

即使是非常简单的<a href="/"><p>Hi</p></a>也不可靠地运行。

我建立在Wordpress的X主题框架上（那里有20多个其他站点），Yoast SEO，Wordfence，Gravity Forms，WP Rocket（处于安全模式），WooCommerce和Stripe for WooCommerce。 / p>

谢谢，伙计们。

Answer 1

模态屏幕！

我有一个模态屏幕，其作用类似于某种重影元素，与z-index拧在一起等等。这就是为什么只有部分图像处于活动状态的原因。

很奇怪，只有Safari出现问题，但是无论如何，这就是问题所在。

我想这就是我试图隐藏所需的丑陋嵌入屏幕之外的东西...：）