css - 固定配置要素内の iframe の位置 (android)

Question

データベースからコンテンツを動的にロードする自作のライトボックスがあり、結果は次のようになります。

<div class="lightbox">

    <div class="lbtop">

    </div>

    <div class="lbcontent">

        lightbox content

    </div>

    <div class="lbbot">

    </div>

</div>

ライトボックス内のすべての要素はブロック レベルの要素であり、フローティングされます (これには、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 に問題があり、開発中の Web サイトはモバイル サイトです)。私は使用してiOsのバグを解決しました-webkit-overflow-scrolling : touch;（誰か、これに代わるAndroidはありますか？）。

Web で修正を検索しても、使用可能な結果は得られませんでした。私が得た最も近いものは、ライトボックスの位置を絶対に設定することでしたが、これはライトボックスの機能に影響を与え、私を満足させません.

これに関する提案があれば幸いです:)事前に感謝します:)