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

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> 

Answer 1

这似乎是Safari中的错误。

我只是使用div，输入字段和视频元素（没有vimeo，没有iframe，只是一个普通视频标签）重新创建了相同的行为。 一旦文本输入的长度超过文本字段的长度，视频就会在整个div上渲染（不仅仅是输入字段，这很奇怪）。 奇怪的是，即使文本仍比文本字段长，视频也会在退格时“回到下方”。

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

由于在其他Webkit浏览器中一切正常（至少在Chrome中如此），因此我认为这确实是平台问题。 我注意到您已经在Apple论坛上发布了一个问题-下一步可能是提交错误报告。

Answer 2

事实证明，这是weltraumpirat和我尝试过的许多Mac确实指出的一个Safari错误。 我已将其提交给苹果，以继续...

同时，作为一种黑客手段，当我在网站上显示覆盖图时，我会隐藏所有视频，这样我就不会再有这种奇怪的行为了。 将可见性设置为“隐藏”或不透明度等于0是不够的，您需要将显示设置为“无”，或者将position属性设置为“绝对”或“相对”，并使用负值来隐藏视频（顶部和/或左侧）。

我希望这对某人有帮助...

Answer 3

我已将其作为苹果的bug提交，不确定该链接是否适用于我以外的任何人：

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

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

感谢Zaziffic提供的错误页面证明，我对其进行了一些修改，并将其包含在错误报告中。