Javascript和CSS移动友好的全屏覆盖

我正在开发一个jQuery lightbox类型的插件，它需要在移动设备和台式机上运行。我对全屏叠加效果有问题。根据我的研究，标准的解决方案似乎是使用

位置：fixed

或

背景附件：fixed

来实现叠加效果。当然，移动设备不支持固定定位，所以我正在尝试另一种方法

现在，我正在将一个函数附加到

$（window）.on（'resize'）

，以获取窗口的新尺寸并为其设置覆盖。我看到的问题是，这会触发闪烁的滚动条，当我缩小窗口的尺寸时，整个事情会变得非常紧张。您可以在这里看到效果：（或）

你知道我怎么解决这个问题吗？代码仍在大量开发中，因此有点混乱，但我试图用一条注释强调我认为JSFIDLE中的两个问题领域，该注释说

“问题：开始”

更新：

---

我有一个绝妙的想法，就是将桌面浏览器的定位改为

固定的

，并且仍然依赖于移动浏览器的调整脚本。这似乎帮助很大，但当浏览器窗口开始变小时（尤其是垂直缩小时），仍然会出现一些明显的闪烁。另外，在安卓4上使用

position:fixed

时，屏幕一侧突然出现一个很大的白色间隙，我只能在纵向模式下水平滚动。有人知道如何解决这两个问题吗？

闪烁问题的解决方案似乎是将

元素的

溢出-x

（或者如果愿意，只需

溢出

）属性设置为

。出于好奇，导致闪烁的其实不是叠加层，而是灯箱内容

---

我仍在努力解决Android上出现的白色缺口问题，但这是另一个问题，所以我将此作为解决方案发布。

我没有看到奇怪的闪烁现象。你用的是什么浏览器？在我测试过的一些浏览器上，滚动条不会显示出来，但是居中的内容会跳来跳去，好像它们在忽隐忽现。这很奇怪。我在这两个浏览器上都看到了。愚蠢的问题，但是你确实先点击了图片，看到了全尺寸的版本，对吗？是的。那太好了。。。对不起，我想我帮不了你，哈哈，谢谢你的帮忙。我想知道是否有其他人看到了这个。如果我单击图像打开灯箱，然后同时在水平和垂直方向上缓慢收缩浏览器窗口（使窗口与图像的比例大致相同），我会看到主要闪烁。还有其他人吗？