Input fields over html5 / flash video disappear - Safari / Mac only
I have a weird one on Safari / Mac only...
I created a page that embeds a video, flash or html 5: it does not matter. The same page has an overlay 开发者_如何学Goas well that contains several text input fields.
When I play the video and then - in the overlay - I type a text that is longer than the length of the input field, the overlay disappears under the video. If the text is shorter than the length of the input field, everything is fine! Now, when I removez-index: 1000; from the style, this strange behavior goes away.
Any idea how to tackle this? Not setting the z-index property is not good enough as the production website has a complicated layout and require this property to be set. The wmode set to transparent does not do anything here as it happens with html 5 videos as well.
Thank you!
Here is the page code:
<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>
This seems to be a bug in Safari.
I recreated the same behavior just with a div, an input field and a video element (no vimeo, no iframe, just a plain video tag). As soon as the text input is longer than the length of the text field, the video is rendered on top of the entire div (not just the input field, strangely enough). Strangely enough, the video also "goes back under" when hitting backspace, even if the text is still longer than the text field.
I also tried various modifications to the css style, and even an onkeyup javascript to manually reset the z-index property - no luck there, either.
Since everything renders fine in other Webkit browsers (at least it does so in Chrome), I assume this is really a platform issue. I noticed you have already posted a question on the Apple forum - perhaps filing a bug report should be the next step.
It turned out this is a Safari bug indeed as pointed out by weltraumpirat and lots of Macs I tried it on. I submitted it to Apple, to be continued...
In the meantime, as a hack, I hide all the videos when I show overlays in my website so I don't have this weird behavior anymore. Visibility set to hidden or opacity equal to 0 are not enough, you need display set to none or to modify the position attribute to absolute or relative and hide the video using negative values for top and/or left.
I hope this helps someone in the meantime...
I've filed this as a bug with apple, not sure if this link works for anyone but me:
https://bugreport.apple.com/cgi-bin/WebObjects/RadarWeb.woa/22/wo/UyoUJEsFJWI6yvjPkar2vg/45.83.28.0.9
If you can't see that page, try searching for Problem ID: 9214803
Thanks to Zaziffic for the proof of bug page, I modified it slightly and included it with the bug report.
加载中,请稍侯......
精彩评论