My First IE9 Bug
I started using IE9 in the RC timeframe and liked it, though it is not likely to unseat Chrome as my primary browser. I downloaded IE 9 RTW this morning, installed and rebooted, and tried it on a site I am working on. Immediately found a bug. (Sign)
The bug is simple. If a video element is on the page, and it is contained within an element whose display is set to "none", when the parent is shown, the video element will not load properly. If it loaded visible then toggled off and then back on, however, it is fine. Apparently there is something about the initial load that messes it up. This works fine in Chrome and Firefox.
To confirm that it was the browser and not something else on my site, I chopped out all the extraneous stuff to build the most basic version I could think of and, unfortunately, it was still broken. Here is that sample.
<!DOCTYPE html>
<html>
<head>
<title>IE9 Bug</title>
</head>
<body>
<div id="whatever" style="display: none;">
<p>Hai!</p>
<video controls>
<source src="http://your.mom/notarealvideo.mp4" type="video/mp4" />
<source src="http://your.mom/notarealvideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
<input type="button" value="show!" onclick="toggle();" />
<script type="text/javascript">
function toggle() {
var el = document.getElementById('whatever');
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>
</body>
</html>
Of course those aren't the real paths to my super secret videos, but you get the point. This little page works in Chrome and Firefox, not in IE 9. I guess I'll have to try another strategy to do the video toggling I was doing...
Comments
Sean Stapleton 2011-03-19 03:57:40
Any different behavior with setting display to inline | block?
Justin 2011-03-19 10:42:27
Try simply going for an opacity change; i.e. start with opacity 0 and move to 1 for showing. Perhaps that will side step the bug =D