Chrome浏览器中的页面上的Magnific Popup导致DIV覆盖苹果浏览器

问题描述

我使用Magnific Popup在Joomla中显示照片画廊！ （用于K2的SIG Pro插件的一部分）。除谷歌浏览器和Apple Safari之外，每种浏览器都可以正常工作。一旦你点击一个图像打开弹出窗口并关闭它，页面上就会出现一个不可见的DIV，因此悬停在页面内容上会导致出现第二个滚动条（在这个隐藏的DIV中）。

下面是一个包含此问题的页面示例：

按照以下步骤复制问题：

1. 打开Goog​​le Chrome（或Apple Safari ）


2. 访问上面的页面（或网站上的类似产品页面）


3. 点击页面底部的小色块图像
>

4. 退出该图像/弹出窗口


5. 将鼠标悬停在该页面底部的任何小色块图像上，并在滚动条出现时观察页面的移动

我查看过编辑这个弹出脚本（包括SIG Pro demo）的其他一些演示，这些演示没有这个问题：

看来这个问题是特定于我所建的网站。任何人都可以看到这种冲突可能根源于何处？

解决方案

这种情况下的问题是在Magnific Popup 。我已经修改了magnifica-popup.css的第60-63行，如下所示：

From：

  .mfp-zoom-out-cur，.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
 cursor：-moz-zoom-out; 
光标：-webkit-zoom-out; 
光标：缩小;  
 
 
 
 
 $ b 
收件人：
  .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
 cursor：-moz-zoom-out; 
光标：-webkit-zoom-out; 
光标：缩小; } 
 
 .mfp-zoom-out-cur {
 cursor：-moz-zoom-out; } 
  

当所有浏览器中的弹出窗口打开时，这将鼠标悬停在灰色叠加层上时删除了缩小光标但Firefox。我不知道为什么光标是一个问题，但转移的影响是没有登录者的问题。

I am using Magnific Popup to display photo galleries in Joomla! (part of SIG Pro plugin for K2). Everything works great in every browser except Google Chrome and Apple Safari. Once you click on an image to open the popup and close it, there is an invisible DIV left on the page so that hovering over page content causes a second scrollbar to appear (in this hidden DIV?).

Here is an example of a page with this issue:http://surfaceartinc.com/designer-glass-and-metals/itemlist/category/417-translucent-fresco-glass.html

Follow the below step to replicate the problem:

1. Open Google Chrome (or Apple Safari)
2. Visit page above (or similar product page on site)
3. Click on a small color swatch image at the bottom of the page
4. Exit out of that image/popup
5. Hover over any small color swatch image at the bottom of that page and observe the shifting of the page as the scrollbar appears

I've viewed a few other demos of this popup script (including SIG Pro demo) which don't have this issue:

• http://demo.joomlaworks.net/simple-image-gallery-pro#sigProId9f0f895fb9
• http://dimsemenov.com/plugins/magnific-popup/

It seems this issue is specific to the site I've built. Can anyone see where this conflict might be rooted?

解决方案

The issue in this case was a cursor setting in the CSS of Magnific Popup. I have modified lines 60-63 of magnific-popup.css as follows:

From:

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

To:

.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; }

This removed the zoom out cursor when hovering over the grey overlay when a popup is open in all browsers but Firefox. I have no idea why a cursor was an issue, but the "shifting" effect is no logner a problem.

这篇关于Chrome浏览器中的页面上的Magnific Popup导致DIV覆盖苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！