css - iframe 在固定定位元素内的位置 (android)

Question

我有一个自己编写的灯箱，它动态加载数据库中的内容，结果是这样的:

<div class="lightbox">

    <div class="lbtop">

    </div>

    <div class="lbcontent">

        lightbox content

    </div>

    <div class="lbbot">

    </div>

</div>

灯箱中的所有元素都是 block 级元素，并且是 float 的(这包括 p、h1 等子元素)。

灯箱使用固定定位以确保它始终位于同一个位置，如下所示:

.lightbox {

    width: 320px;
    height: auto;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    overflow-y: scroll;

}

到目前为止一切顺利。向灯箱添加内容也完全没有问题，所有元素都可以很好地滚动。

但是，当我随后尝试在灯箱内添加 iframe(特别是:soundcloud 嵌入)时，iframe 元素的滚动方式不同于灯箱内的其他元素，如下所示:

在这个例子中，我只是向下滚动，iframe 元素现在移动到文本上方，而不是留在原处。

我已经尝试过使用 CSS 位置、溢出的不同组合的大量解决方案，甚至尝试为此构建我自己的 jQuery 驱动修复(将 iframe 包装在正确定位的 div 中)，但无济于事。总而言之，我觉得这可能是 webkit 中的一个错误(我在 Android 上有问题，我正在开发的网站是一个移动网站)。我确实使用 -webkit-overflow-scrolling : touch; 解决了 iOs 中的错误(任何人，是否有 android 替代品？)。

在网上搜索修复程序也没有给我任何可用的结果。我得到的最接近的是将灯箱的位置设置为绝对位置，但这会影响灯箱的功能并且不能满足我。

我很乐意对此提出任何建议 :) 提前致谢 :)

Answer 1

一段时间后，我设法解决了这个问题。这是一个仅在 SDK 的 android 模拟器(奇怪地)中出现的问题。太糟糕了，我花了很多时间来修复它，但我认为阻止其他人浪费时间可能会很好..

如果你遇到这个问题，请仔细检查一个物理 android 设备，对我来说问题不存在(跨不同的操作系统/浏览器版本)