在 Chrome 和 Safari 中的页面上导致 DIV 覆盖的 Magnific Popup答案

【问题标题】：Magnific Popup causing DIV overlay on page in Chrome & Safari在 Chrome 和 Safari 中的页面上导致 DIV 覆盖的 Magnific Popup
【发布时间】：2015-10-19 19:31:18
【问题描述】：

我正在使用 Magnific Popup 在 Joomla 中显示照片库！（K2 的 SIG Pro 插件的一部分）。除 Google Chrome 和 Apple Safari 外，所有浏览器都运行良好。单击图像打开弹出窗口并关闭它后，页面上会留下一个不可见的 DIV，因此将鼠标悬停在页面内容上会导致出现第二个滚动条（在这个隐藏的 DIV 中？）。

以下是存在此问题的页面示例： http://surfaceartinc.com/designer-glass-and-metals/itemlist/category/417-translucent-fresco-glass.html

按照以下步骤复制问题：

打开 Google Chrome（或 Apple Safari）
访问上面的页面（或网站上的类似产品页面）
点击页面底部的小色样图片
退出该图像/弹出窗口
将鼠标悬停在该页面底部的任何小色样图像上，并观察滚动条出现时页面的移动

我查看了其他一些没有此问题的弹出脚本演示（包括 SIG Pro 演示）：

看来这个问题是我建立的网站所特有的。谁能看出这场冲突的根源在哪里？

【问题讨论】：

请注意，我已经在 Firefox、Internet Explorer、Edge 和 Opera 中进行了测试，并且在任何这些浏览器中都没有出现此问题。
随着最近的 Chrome 更新，此问题再次出现，以下修复不再有效。 :(

标签： jquery google-chrome safari joomla3.0 magnific-popup

【解决方案1】：

本例中的问题是 Magnific Popup 的 CSS 中的光标设置。我已将 magnific-popup.css 的第 60-63 行修改如下：

发件人：

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

收件人：

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom-out-cur {
  cursor: -moz-zoom-out; }

当在除 Firefox 之外的所有浏览器中打开弹出窗口时，将鼠标悬停在灰色叠加层上时，这会删除缩小光标。我不知道为什么光标是个问题，但“移位”效果不是记录器的问题。

【讨论】：