Essential Grid Fancybox - 无法在移动 chrome 上滚动溢出内容

Posted 2023-05-09

【中文标题】Essential Grid Fancybox - 无法在移动 chrome 上滚动溢出内容

【英文标题】：Essential Grid Fancybox - Can't scroll overflow content on mobile chrome

【发布时间】：2020-06-25 03:26:01

【问题描述】：

不确定发布此类问题是否合适，但请试试我的运气，因为我尝试阅读代码并且无法理解我要修复的内容。

基本上，我使用 Wordpress 平台开发了一个网站，并使用了一个名为 Essential Grid 的高级插件来制作网格布局。一旦点击这些网格将打开一个灯箱，并且 Essential Grid 插件使用 Fancybox3 作为灯箱。

问题是，在移动设备中，当内容溢出时，我无法向下滚动查看。灯箱将关闭，这仅在 Chrome 中发生。如果您在 ios Safari 或 Firefox 上对其进行测试，它运行良好。

Here's the staging link of the demo. And here's the Fancybox JS file that they used (they got alter some of the codes).

【问题讨论】：

你能用你的代码创建一个 jsfiddle 吗？

【参考方案1】：

这是因为默认情况下 CSS Grid 单元格的最小高度是自动的。您可以通过在内容上添加min-height: 0; 来轻松解决您的问题，例如：

.eg-lightbox-post-content 
  min-height: 0;

【讨论】：

已经更新了 CSS 但还是一样。我不认为这是因为 CSS，因为 Safari 和 Firefox 没有这个问题。

有趣的是min-height: 0; 是正确答案，但我无权访问您页面的源代码，因此我无法测试它需要应用的确切位置。