Possible problem involving IE9, fly-outs and Twitter widget

HTML & CSS
1

[font=calibri]I’ve had a problem reported by a visitor to my website, but I can’t replicate the issue because he’s using IE9 (at least, so I assume from Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;...)), which I don’t have access to on any of my computers…

The problem (yesterday). I noticed that my Twitter widget wasn’t working. This isn’t something that’s immediately obvious, because it is hidden, and appears as a fly-out when you hover over the Twitter icon at the top-left. Or at least, it always used to. Apparently they’ve updated the widget code and if they sent a bulletin out, I missed it. Oh well. Take two, I got the new code, and of course the DOM output has all changed, so instead of injecting code into the page, it now inserts an <iframe>, which I’m less keen on because it means I can’t style it the way I used to (unless there’s something I’ve missed?). But I got it working, fine and dandy.

Or so I thought. Until today, when I got a cross email from a visitor who had been unable to read the page contents because of a Twitter feed that was covering it. Now, as I said, I can’t test that, and before I go back to him and say “it works fine for me”, I thought I would check on here if anyone can replicate the problem he has had.

What should happen is that the Twitter feed appears only when you mouse over the Twitter icon, and should then disappear when you mouse away to the rest of the page. IE9 users – is that what’s happening for you, or not?

An example page on the site is http://getdown.org.uk/b/73

Thanks![/font]

2

Hi Stevie,

I only have IEtester to check ie9 (and its usually pretty accurate) and I don’t see the twitter feed covering any content until the icon is hovered of course. Maybe the visitor had tripped compatibility mode by mistake so may be worth adding the edge meta tag at the top of the html.

There is an issue in all versions of IE (as far as I can tell) in that you can’t actually get to the feed before it disappears so is unusable. I tested in the real version of IE11 and its the same there also. It’s a long standing bug with iframes in IE and you can’t do x:hover iframe{display:block} and have the iframe remain in place while you try and hover over it. Even if you put the iframe in a div the same things happens.

There seems to be no solution other than using js to show and hide the iframe.

Test:

Using an Iframe doesn’t work in IE:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#twitter {
	position:absolute;
	top:20px;
	left:10px;
	height:36px;
	width:36px;
}
#twitter iframe { display:none; }
#twitter:hover iframe {
	display:block;
	position:absolute;
	border:1px white solid;
	border-radius:5px;
	z-index:100;
}
iframe {
	height:500px;
	width:200px;
	background:red
}
</style>
</head>

<body>
<div id="twitter">
		<div>test</div>
		<iframe></iframe>
</div>
</body>
</html

Change the iframe to a simple div and it works as expected.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#twitter {
	position:absolute;
	top:20px;
	left:10px;
	height:36px;
	width:36px;
}
#twitter .iframe { display:none; }
#twitter:hover .iframe {
	display:block;
	position:absolute;
	border:1px white solid;
	border-radius:5px;
	z-index:100;
}
.iframe {
	height:500px;
	width:200px;
	background:red
}
</style>
</head>

<body>
<div id="twitter">
		<div>test</div>
		<div class="iframe"></div>
</div>
</body>
</html>

If you now add the iframe inside the div then it fails again.:frowning:

3

Thanks for that @Paul_O_B – could compatibility mode have caused the problem? As the newest version of IE that I have access to is v8, I’m struggling with testing, so I’m wondering whether to just stop IE from seeing the Twitter widget at all, and just leave it as an icon that clicks through to my Twitter page, which hopefully would solve the problem, even if it isn’t a great solution.

4

It’s hard to tell but I checked in quirks mode and in Ie7 (ietester) and the feed didn’t apear to be visible and blocking anything but things were of course misplaced. The iframe is a special element in IE7 (and indeed in versions up to ie11) but I still can’t see that it would be showing by default when you have the display:none in place.

As the newest version of IE that I have access to is v8, I’m struggling with testing, so I’m wondering whether to just stop IE from seeing the Twitter widget at all, and just leave it as an icon that clicks through to my Twitter page, which hopefully would solve the problem, even if it isn’t a great solution.[/font]

Considering that the feed is of no use to all IE versions at the moment it may be your only sensible option or alternatively use js to hide and show the iframe for IE9+ just in case.

This is the second thread this week with problems with iframes in IE11 so I guess there are some legacy issues going on with the way that they are handled.