Question

我只在Safari / Mac上有一个奇怪的...

我创建了一个嵌入视频，flash或html的页面5：没关系。同一页面也有一个叠加层，其中包含多个文本输入字段当我播放视频然后 - 在叠加层 - 我输入的文本长于输入字段的长度时，叠加层会在视频下消失。如果文本短于输入字段的长度，一切都很好！
现在，当我从样式中删除z-index: 1000;时，这种奇怪的行为就会消失。

知道如何解决这个问题吗？不设置z-index属性是不够好的，因为生产网站具有复杂的布局并且需要设置此属性。设置为透明的wmode在这里没有做任何事情，因为它也发生在html 5视频中。

谢谢！

这是页面代码：



<html>
    <head>
        <style>
            .popup {
                position: absolute;
                width: 1000px;
                top: 0px;
                left: 0px;
                z-index: 1000;
            }

            input {
                display: inline-block;
                width: 350px;
            }
        </style>
    </head>
    <body>
        <iframe src="http://player.vimeo.com/video/15888399" frameborder="0"></iframe>
        <div class="popup">
            <input type="text" /><br />
            <input type="text" /><br />
            <input type="text" />
        </div>
    </body>
</html>

<html> <head> <style> .popup { position: absolute; width: 1000px; top: 0px; left: 0px; z-index: 1000; } input { display: inline-block; width: 350px; } </style> </head> <body> <iframe src="http://player.vimeo.com/video/15888399" frameborder="0"></iframe> <div class="popup"> <input type="text" /><br /> <input type="text" /><br /> <input type="text" /> </div> </body> </html>

Answer 1

这似乎是Safari中的一个错误。

我使用div，输入字段和视频元素（没有vimeo，没有iframe，只是普通的视频标签）重新创建了相同的行为。一旦文本输入长于文本字段的长度，视频就会呈现在整个div 之上（不仅仅是输入字段，奇怪的是）。奇怪的是，即使文本仍然长于文本字段，视频也会在返回空格时“返回”。

我还尝试了对css样式的各种修改，甚至是onkeyup javascript来手动重置z-index属性 - 也没有运气。

由于其他Webkit浏览器中的所有内容都很好（至少在Chrome中是这样），我认为这确实是一个平台问题。我注意到你已经在Apple论坛上发布了一个问题 - 或许应该提交错误报告，这应该是下一步。

Answer 2

事实证明这确实是一个Safari bug，正如weltraumpirat所指出的那样，很多Mac都试过了。我把它提交给Apple，继续......

与此同时，作为一个黑客，当我在我的网站上显示叠加时，我会隐藏所有视频，所以我不再有这种奇怪的行为了。设置为隐藏或不透明度等于0的可见性是不够的，您需要将显示设置为无或将位置属性修改为绝对或相对，并使用顶部和/或左侧的负值隐藏视频。

我希望在此期间帮助某人......

Answer 3

我已将此作为苹果的错误提交，不确定此链接是否适用于除我之外的任何人：

https://bugreport.apple.com/cgi-bin/WebObjects/RadarWeb.woa/22/wo/UyoUJEsFJWI6yvjPkar2vg/45.83.28.0.9

如果您看不到该页面，请尝试搜索问题ID：9214803

感谢Zaziffic提供bug页面的证明，我稍微修改了它并将其包含在bug报告中。

html5 / flash视频上的输入字段消失 - 仅限Safari / Mac

3 个答案: