0

これは奇妙です。私は次の構造を持っています：

<div id="iframe-wrapper">
    <iframe src="form.html"></iframe>
</div>

およびCSS:

#iframe-wrapper {
    position: fixed;
    height: 350px;
    width: 200px;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

form.htmlには以下が含まれます。

<!DOCTYPE HTML>

<html>
<body>

    <form action="http://...">
        <input type="text" name="first_name" placeholder="First Name" required="required" />
        <input type="text" name="last_name" placeholder="Last Name" required="required" />
        <input type="email" name="email" placeholder="Email" required="required" />
        <input type="text" name="cellphone" placeholder="Cellphone" required="required" />
        <button type="submit">Sign Up!</button>
    </form>

</body>
</html>

現在、Chrome で入力フィールドをクリックしても何も起こりません。点滅するカーソルが表示されるはずですが、そうではありません。書き始めても、まだ何も表示されません。しかし！ページをスクロールすると、明らかに iframe が更新され、突然、私が書いた内容が表示されます。

すべてposition: fixed;からを削除すると、期待どおりに機能します。#iframe-wrapper

Chrome でこの動作に気付きましたが、FF では問題なく動作します。

私は本当にこのiframeを何らかの形で固定位置で必要としています。何か提案はありますか?

4

0 に答える 0